Why is my background image not loading ?

-
Hello,

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 :
<html>
<head>
</head>
<body>
   <nav>
   </nav>
   <div id="home">
   </div>
... (other divs)
</body>
</html>


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

See more 

Your reply

1 reply

Posts
10909
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
December 7, 2018
0
Thank you
"img/mountains.jpeg" 


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 !
ac3mark
Posts
10909
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
December 7, 2018
-
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
ac3mark
Posts
10909
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
December 7, 2018
-
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.
ac3mark
Posts
10909
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
December 7, 2018
-
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?
Respond to ac3mark