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 Chris Schweiger
Chris Schweiger
2,195 Points

background-image is constrained to the size of the h2 tag

I'm trying to add a background image so I can have text over it but when I add the background image it doesn't show the whole image, just the size of the h2 tag. Is their a way to make it display the whole image? Here is my html and css code as well as the image. Thanks

<section id="content_wrap" class="row">

            <h1 id="feature_body" class="col span_12 clr">dont let your website be the expendable one<span class="smaller">with so many website designers out there, make sure yours doesn’t abandon you.</span></h1>

</section> 

#feature_body{
background-image: url(../img/Feature-1100x410-w-men.png);
background-repeat:no-repeat;
background-size: 100% 100%;

}

(http://www.flickr.com/photos/33760164@N02/9008297655/)

2 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

The image is doing that because it is 100% 100% of the size of the containing element. So you either need to put the image in your markup, make the size of your h1 larger, or make it the background of a different element.

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

what you could do is wrap your h1 in a div then set the width and height of the div to the size you want the background image to cover. I think this might help. ;)

  <div class="wrap">
      <h1 id="feature_body" class="col span_12 clr">
          dont let your website be the expendable one
          <span class="smaller">
            with so many website designers out there, make sure yours doesn’t abandon you.
          </span>
  </h1>
  </div>

CSS:

  .wrap {
  background: url(../img/Feature-1100x410-w-men.png) 50% 50% no-repeat;
  width: 1100px;
  height: 450px;
  }