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

Adam Romański
Adam Romański
8,568 Points
Posted by Adam Romański
Adam Romański
8,568 Points

background image covering full width of the window

Hello,

recently i've discovered that beatufiul, yet simple website showing how we can combine google fonts:

http://femmebot.github.io/google-type/

and i really liked the way how the background image is covering whole width of the windows, but the content is held insinde container that is aligned to the center with margin: 0 auto;

I've checked the code, but i have no idea how it's done. Does anyone can help me and explain how can i make this kind of site where i set the background image inside different containers, but the size of it is bigger than it's parent div?

I've already tried background-size: cover, but it only covers the space of it's parent div.

PS sorry for my poor english :/ I hope you guys will understand what i've tried to ask about. If something is unclear i'll do my best to explain :P

cheers, Adam

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Adam,

You can try this option, by giving the html or body element the background img.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

If you want to have multiple images though i would use a method like this.

<body>

<header>
<h1>Stuff here</h1>

<div class="background-image">
  <img src="whatever you want" alt="background image">

<div class="wrapper one">
<!-- all your content here -->
</div> <!-- close wrapper div -->

<div class="background-image">
<img src="whatever other image you want" alt="background image">

<div class="wrapper two">
<!-- all your content here -->
</div> <!-- close wrapper div -->

<div class="background-image">
<img src="whatever other image you want" alt="background image">

<div class="wrapper three">
<!-- all your content here -->
</div> <!-- close wrapper div -->

</body>

By keeping the image outside the wrapper you can cover the background and have you content positioned in the middle with the correct css.

Hope this helps.

Adam Romański
Adam Romański
8,568 Points
Adam Romański
Adam Romański
8,568 Points

Hey, thank you so much for this solution. I've modified it a little and it works like a charm!

<body>

<header>
<h1>Stuff here</h1>

<div class="background-image-one">
<div class="wrapper one">
<!-- all your content here -->
</div> 
</div>

<div class="background-image-two">
<div class="wrapper two">
<!-- all your content here -->
</div>
</div>

<div class="background-image-three">
<div class="wrapper three">
<!-- all your content here -->
</div>
</div>

</body>

So i've just set background-image property for every background-image-x class and the wrapper is always inside, so the background can be spread on whole window width. Correct me if my way is wrong cause i would like to avoid some problems later on. But it seems to be ok.

Thanks again for this really quick support :)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

That looks fine Adam,

I take it your going to use css to bring in the img.