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 tuukka uosukainen
tuukka uosukainen
22,107 Points

background image is not visible

I'm having a hard time with background image. I have no idea what I'm doing wrong. My image is in img folder and my css file is in css folder.

I'm using Chrome.

Here is my code.

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background image</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

</body>

</html>

css

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

8 Answers

jordans
jordans
1,609 Points

EDIT: I actually found a better way to do it that actually goes 100% of the page without adding some extra scrolling. You have to put a div id inside a container and set the container's height to 100%. To make an element truly 100% vertical, it has to use some sort of containing element to guide how large the page is. You also should set your body's width and height to 100%, as well.

html, body {
    height:100%;
    width: 100%;
}

#container {
    height:100%;
}

#vertical {
    height: 100%; 
    width: 400px;
    background: url('../img/bg.jpg') no-repeat center center;
    background-size: contain;
}

<body>
   <div id="container">
   <div id="vertical"></div>
   </div>
</body>

*---------------------------------------------------------------------------------------------------------------------------------------------------*

Add a padding-top property and set it to whatever percentage you want.

.header {
    width: 400px;
    padding-top: 100%;
    background: url('../img/bg.jpg') no-repeat center center;
    background-size: cover;
}

EDIT: Also, don't forget to reset your browser defaults by either embedding a reset stylesheet or typing:

body {
    margin: 0 auto;
}

I highly suggest either downloading or embedding an already made reset stylesheet since they make coding much easier in the long run. You can find one here.

simhub
simhub
26,544 Points
simhub
simhub
26,544 Points

Well ! you should use "background" instead of " background-image"

<pre> background: url('../img/bg.jpg') no-repeat center center;</pre>

;)

jordans
jordans
1,609 Points
jordans
jordans
1,609 Points

Instead of using "background-image" in your stylesheet, just use "background". The "background-image" property is specifically meant for implementing the image location.

html {
    height: 100%;
    width: 400px;
    background: url('../img/bg.jpg') no-repeat center center;
    background-size: cover;
}
Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

"background-image" element can only take the value for the background image and does not understand "no-repeat" or "center center". You can use the shorthand "background" to specifiy the values in one element or individually set the values.

Try this:

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

or

html {
    height: 100%;
    width: 400px;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Thank you simhub!

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Thanks for all the help people (edited since I'm not sure if everyone is a guy)!

It worked when I used it as a background image of my body element but for some reason when I try to use in a div it doesn't work. I used the same values as I did with the body tag but image disappeared.

This gives me a headeache :)

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Ok it seems I need a height for the div to bg-image appear.

This is harder than I thought.

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

I've used the basic reset.

* {margin: 0; padding: 0;}

Thank you so much for the padding-top advice. I probably would have never figured that out. Actually I am not quite sure what it does :) As long as it works, though...

jordans
jordans
1,609 Points

I actually found a better way to do it that actually goes 100% of the page without adding some extra scrolling. You have to put a div id inside a container and set the container's height to 100%. To make an element truly 100% vertical, it has to use some sort of containing element to guide how large the page is. You also should set your body's width and height to 100%, as well.

html, body {
    height:100%;
    width: 100%;
}

#container {
    height:100%;
}

#vertical {
    height: 100%; 
    width: 400px;
    background: url('../img/bg.jpg') no-repeat center center;
    background-size: contain;
}

<body>
   <div id="container">
   <div id="vertical"></div>
   </div>
</body>
Codin - Codesmite
Codin - Codesmite
8,600 Points

The "padding-top: 100%" works because CSS padding element using percantage values uses intrinsic ratios.

What this basically means is that it is defined CSS behaviour that if a padding element has a percentage value it will use the width to calculate it's value.

examples:

#example1 {
   width: 500px;
   padding-top: 100%;    /* height will be 500px */
}

#example2 {
   width: 500px;
   padding-top: 50%;    /* height will be 250px */
}

#example3 {
   width: 100%;
   padding-top: 100%;    /* height will be 100% */
}

#example3 {
   width: 50%;
   padding-top: 50%;    /* height will be 25% */
}