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 CSS Foundations Backgrounds and Borders Advanced Backgrounds

Posted by Joy Ahmed
Joy Ahmed
Courses Plus Student 9,687 Points

Can't fit an image to cover the background

I want to get an image to cover my background. I wrote the code as given in the video. Even tried several sizes for the image but it doesn't cover the background. Please, help.

Joy Ahmed
Joy Ahmed
Courses Plus Student 9,687 Points

Here is my code:

html { height: 100%; background: url('img/full-page.jpg') no-repeat center; background-size: cover; }

Ting-Chieh Huang
Ting-Chieh Huang
3,387 Points
Ting-Chieh Huang
Ting-Chieh Huang
3,387 Points

Hey Joy try to add background-size:100%;

Joy Ahmed
Joy Ahmed
Courses Plus Student 9,687 Points

Doesn't work Huang

3 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Joy,

Without seeing your code it's difficult to see the exact issue but this page from w3schools or this post on CSS Tricks should hopefully help.

-Rich

Joy Ahmed
Joy Ahmed
Courses Plus Student 9,687 Points

Here's my code Rich html { height: 100%; background: url('img/full-page.jpg') no-repeat center; background-size: cover; }

Rich Bagley
Rich Bagley
25,869 Points

Hi Joy,

Can you try the following please?

html {
   background: url('images/full-page.jpg') no-repeat center center fixed;
   background-size: cover;
}

Does it make any difference?

-Rich

Joy Ahmed
Joy Ahmed
Courses Plus Student 9,687 Points

No difference Rich... is image size a problem?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

try this instead!

html {
   background: url('images/full-page.jpg') no-repeat;
   background-size: cover; 
   background-position: fixed;
}

Hope this helps!

Kind regards.

// Erdrag

Rich Bagley
Rich Bagley
25,869 Points

Hi Joy,

What are you seeing? Is the image appearing fixed in the centre but just not filling the screen?

-Rich

Joy Ahmed
Joy Ahmed
Courses Plus Student 9,687 Points

I guess... it's with the size of my pic. I have tried another image and it does work... can u help me with the image size

Rich Bagley
Rich Bagley
25,869 Points

Hi Joy,

Not sure what to suggest I'm afraid as the code I posted works fine for me, even testing with a 350px wide by 80px high image.

The only other thing I can think of is that you have a background-color set on a div above which is preventing the image from showing as it is behind the div.

Sorry I couldn't be more help.

-Rich

Anya Coleman
Anya Coleman
2,995 Points
Anya Coleman
Anya Coleman
2,995 Points

Joy your code ( html { height: 100%; background: url('img/full-page.jpg') no-repeat center; background-size: cover; } )

full-page.jpg change to full-bg.jpg image name (full-bg.jpg)

html { height: 100%; background: url('img/full-bg.jpg') no-repeat center; background-size: cover; }

Jaime Rios
PLUS
Jaime Rios
Courses Plus Student 21,100 Points
Jaime Rios
Jaime Rios
Courses Plus Student 21,100 Points

I had the same issue with www.seducciondelta.mx it helped using the vh unit for the background. Here you can see another example. http://zurb.com/building-blocks/hero-image-with-text-and-image