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

Joshua "TechDev" Walker
Joshua "TechDev" Walker
6,823 Points

why isn't my bg property working?

Its not filling my HTML with the stated .png file.

Im looking to have a full static background.

Any suggestions?

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

5 Answers

Andres Altuve
Andres Altuve
16,274 Points

Hey Joshua, if you want to fill the whole background you have to choose the body tag.. The HTML tag is to tell the browser where HTML start and where it finish.

To give a background to the whole site your code should look like this:

body {background: url('img/smoke.png') no-repeat center; background-size: cover; }

For example if you want your site background black you use the following css:

body {background:#000;}

I think the image may do what you want with the code below. I just used a random smoke image to try it out. I'm not sure you need to center it.

body {
  height: 100%;
  background: url("smoke.png") no-repeat;
  background-size: cover;
}
Joshua "TechDev" Walker
Joshua "TechDev" Walker
6,823 Points

Neither methods have worked for me - I wonder if its my editor.

Regular background colors have worked but images have not.

Andres Altuve
Andres Altuve
16,274 Points

Joshua, if you are using chrome access your html file and then hit right click, a sub-menu will show then select "inspect element" if you are having a problem with your background it will show you an error.

Joshua "TechDev" Walker
Joshua "TechDev" Walker
6,823 Points

Thanks for you help Andres and Tree Casiano!

It turned out to be the editor - I put it in another one and everything is working perfectly!

I really appreciate the help and I am glad I am not crazy lol

Andres Altuve
Andres Altuve
16,274 Points

Anytime dude, glad you found out what was the problem.

Glad you got it to work!