Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

image pushing section down

Hello, my image on my page is pushing my text section down, is there anyway to abvoid this, and make the text and banner overlap the image?

heres a picture of it http://imgur.com/aT4b4EN

Kind regards

// erdag

heres the css

.support-text {
  width: 600px;
  position: relative;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    clear:both;
    margin-bottom: 130px;
}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  float: right;
  z-index: 0;
}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.support-text {
  clear: left;
}

and html

<img src="img/ct.png" class="ct-pic">

    <section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p>Hello hello hello hello hello hello hello hello hello hellohello
helloh ellohello hello helooh elloh ello helloh ello hello hello
hello hellohello hello hello hello </p>

    </section>
Tim Holley
Tim Holley
8,464 Points

Is your intentions for that image to be the background, and then the support us would be in the foreground? If this is the case, you can then do this.

.support-text {
background-image: url('...')
}

The images i want to the right side of the banner and the text, but the image is to large so it pushes the text and banner down, is there anyway to make the text and banner overlap the image?

2 Answers

I agree with Tim,

Your best bet will be setting the first image as the background image. you should also set the max-width to 100% for the inner img so that it is at the .support-text width. View below. LEt me know if you have any questions.

<section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p>Hello hello hello hello hello hello hello hello hello hellohello
helloh ellohello hello helooh elloh ello helloh ello hello hello
hello hellohello hello hello hello </p>
    </section>
.support-text {
  width: 600px;
  position: relative;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    clear:both;
    margin-bottom: 130px;
  background: url('http://goo.gl/ef6gSh');

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
  max-width: 100%;
}


.support-text {
  clear: left;
}

Hello, thanks fro replying, i positioned my images with absolute, heres a picture http://imgur.com/KwzphQP thats how i want the them to be, but know when i rezise the window they move around, (note; my page has a fixed layout)

i want the pictures to be like this, 1 to the left and 1 to the right, but know when i rezise the characters move around heres the css

.support-text {
  width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    margin-bottom: 130px;

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  clear: left;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  position: absolute;
  right: 10px;
  bottom: 30px;
  float: right;
}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  position: absolute;
  left: 40px;
  bottom: 30px;
  float: left;
}

That one is a bit more complected especially when you consider users with mobile devices. You can use media queries to display the two images on larger screen and hide them on smaller screens.

@media screen and (min-width: 690px) {

.ct-pic {
  position: absolute;
  right: 10px;
  bottom: 30px;
  float: right;
}

.ct-pic:hover,
.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  position: absolute;
  left: 40px;
  bottom: 30px;
  float: left;
}

}

@media screen and (max-width: 689px) {

.ct-pic,
.t-pic {display: none;}

}

my page is not made for mobile screens, but i want the images to stay at the same locations even when i rezise the browser, is this possible?

I'm sure it is but the answer is beyond my knowledge unfortunately. I hope you find your answer.

oh okey, thanks :)