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 Ashley Dillon
Ashley Dillon
9,092 Points

Image widths

Hi, I have a header image that I am trying to span the full width of my window, but it still is showing the margins set by my page width (1000px). Any help is much appreciated. I build it just like the "smells like bakin' website".

(my css):

#intro{
    background: url(../img/tea-plantation.png) no-repeat center center ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    display: block;
    text-align: center;
    color: white;
    margin: 0%;
    padding: 0%;
    width: 100%;
}
Ashley Dillon
Ashley Dillon
9,092 Points

Sorry just figured out the answer! Changed my container width to 'auto'.

Thanks!

2 Answers

Donny Stiefel
Donny Stiefel
7,682 Points

I used similar code for a scaling background on our company's website, but I did not set a width. The idea of using the "cover" attribute is to not need to specify a width/height value since the browser will be doing all the "stretching" for you. In our case the background was for the body element. Specifically, the code I used was nearly identical to yours except I used a "fixed" background: background: #000 url('image') no-repeat center center fixed; and no width/height.

It may work the same in either case. Just wanted to share my thoughts.

Ashley Dillon
Ashley Dillon
9,092 Points

Thanks for your help! I didn't try that so I will give it a shot!

Jacques Vincilione
Jacques Vincilione
17,292 Points
Jacques Vincilione
Jacques Vincilione
17,292 Points

Just a tip, if you want to use a percentage for a width for direct children of the body element, you need to give the body and html (for good measure) elements a width. Just set their widths to 100%.

ie: html, body{width:100%}

Ashley Dillon
Ashley Dillon
9,092 Points

Thanks for your help! I'll give that a shot as well!