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 Martin H
Martin H
986 Points

Background cover image

Hey

I have made a website, and for few reasons started building it from bottom to top. I have made all the elements (with divs) and now I would like to set a header as a cover image (it is expanded to fullscreen no matter the browser size). Just like a lot of popular pages nowadays. So when you scroll down, you immediately see the next section.

I am able to do the cover header when it is the only thing coded, with:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(background.jpg) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This works, but when I have divs underneath, it is imposible to recreate.

Anyone has any idea, how I could include this into its own header div instead of body and so, that is would work?

Thanks

12 Answers

Christine Dawson
Christine Dawson
8,136 Points

You are nearly there with what you have already. Add the background-cover property to the header and it should work..

<div class="header"></div>

<div class="project1">content</div>
<div class="project2">content</div>
<div class="project3">content</div>
<div class="project4">content</div>

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
 }

.header {   
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  background-image:url('http://scrapd.nl/assets/images/carousel/cover-0.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
}

I created a jsfiddle for it here

Matt Trask
Matt Trask
10,027 Points
Matt Trask
Matt Trask
10,027 Points

are you trying to do the parallax scrolling thats popular these days?

Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

Just simple background image, no parallax effect. Hope it's not forbidden to post links.. just plain image like this: http://scrapd.nl/

Matt Trask
Matt Trask
10,027 Points
Matt Trask
Matt Trask
10,027 Points 
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

And how do I include this into html?

Matt Trask
Matt Trask
10,027 Points
Matt Trask
Matt Trask
10,027 Points

well you can either do a <style></style> tag in the head, or do a separate css file

Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

My last message was stupid.. i know how to do that. I just cant get this right. I would like to get the same effect like this page: http://scrapd.nl/

I have this HTML code, where first div should be header and projects are underneath.

<div class="header"></div>

<div class="project1"></div>
<div class="project2"></div>
<div class="project3"></div>
<div class="project4"></div>

.header {

  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  background-image:url('background.jpg');

Of course, nothing happens. I still only have those four divs shown, but background cover image is missing.

Matt Trask
Matt Trask
10,027 Points
Matt Trask
Matt Trask
10,027 Points

you want the image to cover all the div's? if thats the case, add a new class for each called " proj" so you have class="proj project1" and then use .proj to control the css among the 4 divs.

or you can do project1, project2, project3, project4 {css}

Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

I changed my code a bit. No, I want project divs appear when I scroll down, like Menu apprears on http://scrapd.nl/ . But they are not problem, just cover background image does not appear.

Matt Trask
Matt Trask
10,027 Points
Matt Trask
Matt Trask
10,027 Points

thats a cool site.

id have to see your code more in detail to really see whats going on.

Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

Thank you very much Christine, that works perfectly.

Also Matt, thank you for your help!

Martin H
Martin H
986 Points
Martin H
Martin H
986 Points

I would just need one more answer, that appeared... I need to position a png logo on the center of this background image. I aligned it horizontaly via

 text-align: center;

but no vertical alignment works.