Why is my background image not loading ? [Closed]

 Blocked Profile -

I'm new to creating websites and I'm now following a tutorial to guide me. Unfortunatly, eventho I write exactly as the tutorial, my website's behavior isnt the same. It's pretty basic I guess.

I'd like to load a background image inside my CSS and apply it to my #home id. Here is my HTML structure :
   <div id="home">
... (other divs)

And the corresponding CSS (path is OK) :
#home {
 background-image: url("img/mountains.jpeg");

The weirdest part : when I try loading this image using background-image inside my "html, body {CSSHERE}", it loads perfectly

Do you have any idea ? i'd like to keep working on that but I'm stuck since hours

1 reply


This is a folder within the folder you are publishing from. To start out with, use the complete path, and parse off what you don't need after you understand where it is pulling it from. So in other words, instead of "img/mountains.jpeg", use "E:\webfolder\WWW\img\mountains.jpeg".

Try that.

After you do that, make certain the SERVICE that is retreiving the image, has read rights to the folder! You may be dealing with a permissions issues. Do you get any errors?

I'm working with LAMP and all I've granted all the privileges to all users (I'll purge / install once I've understand the issue to make a proper install), but it's still not working.
I've also tried all kind of path, relative and absolute. Weird thing is that other pictures (in the same folder, with the same privileges) are loading when it comes from <img>, but not when it comes from CSS (#home {background-image: url();}). My code is ok, it works for other people who tried it. I'm so confused !
CSS is a different rendering animal. Take a look at this example:

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

will look for images folder in the folder from which css is loaded. So if images are in another folder or out of the CSS folder tree you should use absolute path or relative to the root path (starting with /).

Is the CSS file in a different folder than the rest of the code? If so, then your path needs to be frmo the webserver root folder, not from the CSS folder.
A wild animal to me !

I'm working on a local server (LAMP), my project folder is called elManel. If I understand your example, I've to precise "/elManel/img/myimage.jpeg" ? (/public-html is my server's root folder right ?).
I've tried it and other path (/Documents/public-html/elManel/img/myimage.jpeg) but none of them works to me unfortunalty. I've also tried puting my CSS into my "img" folder and changing my code, didnt work either.

I've been working a bit on Windows machine, i've done dozens of project (integration) and I never faced that kind of issues
Blocked Profile
Well, to make certain it is a PATH problem, PUT the FULL absolute path to the file to troubleshoot, I.E, on the server document place E:\wwwroot\img\blablahblah or whatever the ABSOLUTE path is. Then you can figure out the relative from CSS folder.
Blocked Profile
OK, I just looked at a working solution, here is how the structure goes (windows):
Published directory:wwwroot
CSS folder location wwwroot\style
css file entry: BACKGROUND-IMAGE: url(\images\bcard.gif);
bcard.gif stored in wwwroot\images

See the relationship?