Background image path not working

HTML & CSS
1

Hi,
I am trying to link to a background image inside <style> tags. I want to image to stretch over the whole page.
I know that a leading / will start path in my webroot. So why is this not working?

        <style> 
            body { margin: 0; } 
            canvas { width: 100%; height: 100% } 
            background: url('/lilegibney/images/background.jpg') no-repeat center center fixed; 
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
        </style>

The file directories look like this,

Any help would be greatly appreciated. I have been trying different …/ and ./ and single and double quotes for the last hour. But nothing seems to be working.
Thanks,
Shane

2

All those rules aren’t within a selector though? What do you expect those rules to do?

You have these two rules. Correct.

 body { margin: 0; } 
 canvas { width: 100%; height: 100% }

Then this with no selector.

background: url('/lilegibney/images/background.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Simple validation would have alerted you to this.

You don’t need the vendor extensions for background-size:cover.

3

Ok, so I have now put the background properties inside the body selector.

        <style> 
            body { margin: 0; 
            background: url(/lilegibney/images/background.jpg) no-repeat center center fixed; 
            background-size: cover; } 
            canvas { width: 100%; height: 100% } 
        </style> 
</head> 
<body>

Before reading this, http://www.domedia.org/oveklykken/css-shorthands.php I didn’t know about selectors, properties and values.
Is there anything else I should be doing? It is still not working.

Thanks,
Shane

4

There’s nothing invalid in your CSS so I’d need to see a webpage to further debug. Is there any restrictions on that folder? Permissions?

Try an absolute URL (e.g.http://www.sitehere.com/lilegibney/images/background.pg).

Otherwise I’ll need the URL of the page (along with the URL of the image.)

5

Hi,

I tried single quotes and it is working now.

background: url('/lilegibney/images/background.jpg') no-repeat center center fixed;

Thanks,
Shane

PS www.lilegibney.com not worth looking at, very boring.

6

You might have been seeing a cached old version of the page because quotes do not matter. Either way, glad it’s working now.

1 Like
7

Yes true, single quotes not necessary.
Thanks for your help.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.