Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kevin Goudswaard
Kevin Goudswaard
11,061 Points

I need help getting a picture to sit behind other elements.

I am attempting to place a div with a nested picture element below my navigation element that also sits behind all the other elements on the page. Like a background picture that only takes up a height of about 200px right below the nav. any suggestions? current code: http://codepen.io/anon/pen/ZQdxWV

The picture's dimensions are ok, but it needs to sit behind everything.

thanks for any insights :)

4 Answers

lauraniebel
lauraniebel
4,685 Points

I'd insert the water image as a background image, instead of a regular image.. Have a look on CodePen: http://codepen.io/anon/pen/mVZxjB?editors=1100

I created a new div (.mainContent) which encloses all the main content of your page. The div has your water image applied as a background image.

Hope that's what you had in mind.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Why not just change the image into a background?

Eliminate the img tag, move the closing tag of the water div so that it encloses everything after the nav, and put this in the CSS:

.water {
  background-image: url(http://www.clipartbest.com/cliparts/9T4/bR7/9T4bR778c.jpeg);
  background-size: contain;
}
Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

Hi Kevin,

So, first in your .water img {} rule, float: bottom, bottom is an invalid value for the float property.

I think I understand what you want to accomplish. Currently you have this:

<div class="water">
    <img src="http://www.clipartbest.com/cliparts/9T4/bR7/9T4bR778c.jpeg">
</div>

.water img {
    width: 100%;
    height: 100%;
    float: bottom;
    margin: 0;
    padding: 0;
}

/*
Try using the css background property instead of using the img element.
See if this is what you are after:
*/
<div class="water"></div>

.water {
  background-image: url("water.jpg") center center no-repeat;
  margin: 0;
  padding: 0;
}

Go here for more info: http://www.w3schools.com/cssref/css3_pr_background.asp

Hope this was helpful.

Kevin Goudswaard
Kevin Goudswaard
11,061 Points
Kevin Goudswaard
Kevin Goudswaard
11,061 Points

Thank you very much, I had not thought of that!