asked on

css background image not displaying

Trying to set background image of page with following but it will not display. Please help. Thanks.

<!DOCTYPE HTML>
<HTML>
      <head>
            <title>test</title>
            <link rel="stylesheet" type="text/css" href="styles/styles.css" />
      </head>

      <body>

      </body>

</HTML>

html {
      height: 100%;

       background: url(imgs/1.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;

}

body {
margin-top: 0;
height: 100%;
}

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

centem

ASKER

I moved it to the same directory that the css stylesheet is in and it works. How can I reference correctly. I have a folder called imgs and a folder called styles. I thought I could just reference the image with /imgs/1.jpg but it doesn't work.

Gary

In CSS files always use absolute paths from your root so

background: url(/imgs/1.jpg) no-repeat center center fixed;

will look for 1.jpg in the imgs folder which is in your root folder

Paths in CSS files are relative to the page including the CSS file unless you specify an absolute url which means preceding the path with / e.g. /imgs/1.jpg
Assuming a structure like

/root folder
mypage.php
/imgs
1.jpg
/css
mycss.css