• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 446
  • Last Modified:

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%;
}
0
centem
Asked:
centem
  • 2
1 Solution
 
GaryCommented:
Nothing wrong with the code
http://jsfiddle.net/GaryC123/JgeLg/

Are you sure you have the path to the image correct? Does the image really exist?
0
 
centemAuthor Commented:
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.
0
 
GaryCommented:
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
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now