Menu
Ask a question Report

Why is my background image not loading ?

-
Programming Ask a question Report
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 

1 reply

Report Respond to ac3mark
Posts
12936
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
September 3, 2019
 1342
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?





View all 11 comments
Report Respond to Kamus
-
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 !
Report Respond to ac3mark
ac3mark
Posts
12936
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
September 3, 2019
 1342 -
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.
Report Respond to Kamus
-
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
Report Respond to ac3mark
ac3mark
Posts
12936
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
September 3, 2019
 1342 -
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.
Report Respond to ac3mark
ac3mark
Posts
12936
Registration date
Monday June 3, 2013
Status
Moderator
Last seen
September 3, 2019
 1342 -
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
Reply Ask a question