Background image not appearing HTML CSS

Question

I am new to html/css and I do not understand why my background image is not showing up. This is part of a simple test CSS sheet and HTML code for a simple site. I am trying to add a background-image and I have done this once and it worked and I do not know why it does not work now.

body{
background: url (rio.jpg); 
background-size: cover; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; 
}

This is part of my css sheet. THe url works, I have used it for another trial site before. And my html is just a regular html document with a body etc..

Answer 1

You can try doing the following:

background-image: url(http://www.example.com/images/bck.png); // absolute path

background-image: url(rio.jpg); // relative path

If you are stating that the path is just rio.jpg, the image should be in the same directory as the stylesheet/where you are declaring the background.

If the image is in an image directory, you may need to go up a level as follows:

background-image: url(../images/rio.jpg);

Depends where the image file is located. You can refer to following for further information: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Hope this helps!

Answer 2

CSS is picky about functions.

You can't have a space after 'url' and the parenthesis.

Correct: background: url(path/to/image.jpg);

Incorrect: background: url (path/to/image.jpg);

Here's a fiddle demonstrating: http://jsfiddle.net/tJmmn/

Answer 3

Haha I had the same problem, make sure you have the right ".png" or ".jpg"!

After all my searching, the problem was I had a file called "bg.png", but I was typing in "bg.jpg"

Answer 4

Had the same issue. I used "background" and instead of "background-image".
Secondly, make sure that the element that has the background e.g a div tag is not empty, else the background image won't show

Answer 5

This problem occurs if you are trying to give the height of the background image in %. If you give that in px it should work and if you still want to give the height in % i.e. 100%(generally) than add this in css: body{ margin: 0; padding: 0; positive: absolute; top: 0; bottom: 0; left: 0; right: 0; }

This should work as well.