Why is my background image not loading ?

Closed

Kamus - 12 Nov 2018 à 12:11
Blocked Profile - 14 Nov 2018 à 16:11

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

Why is my background image not loading ?
Broken image - Guide
Viber background image - Guide
Oceanis change background - Download - Customization
Windows 10 disc image - Download - Windows
Kali linux iso image - Download - Linux

1 response

Réponse 1 / 1

Blocked Profile
12 Nov 2018 à 16:42

"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?

Kamus
12 Nov 2018 à 18:03

Thanks for your answer, sorry for the late reply I'd a hitch.

When I add the absolute path I cant open the file into VSCode (using Ctrl+left clic). I've tried those 2 paths :
- /home/loris/public-html/elManel/img/mountains.jpeg
- ~/loris/public-html/elManel/img/mountains.jpeg
Only "img/mountains.jpeg" loads me the picture into VSCode, but none of them works in Mozilla.

I followed this guide : https://stackoverflow.com/questions/9133024/www-data-permissions
Here is the permissions :

loris@eliya:~$ ls -l
drwxr-s--- 4 loris www-data 4096 nov.  12 18:44 public_html


loris@eliya:~/public_html$ ls  -l
total 1440
drwxrwsrwx 3 loris www-data    4096 nov.  12 22:45 elManel


loris@eliya:~/public_html/elManel$ ls -l
total 20
-rw-rwSrw- 1 loris www-data  444 juil. 28 17:29 BootstrapCourse.html
drwxr-sr-x 2 loris www-data 4096 nov.  12 16:58 img
-rwxrwsrwx 1 loris www-data 5368 nov.  12 23:25 index.html
-rwxrwsrwx 1 loris www-data 1709 nov.  12 23:25 style.css


loris@eliya:~/public_html/elManel/img$ ls -l
total 1488
-rw-rwSrw- 1 loris www-data 478921 févr. 13  2018 background.jpg
-rw-rwSrw- 1 loris www-data  36327 févr. 14  2018 bootstrap2.png
-rw-rwSrw- 1 loris www-data  28693 févr. 13  2018 bootstrap.png
-rw-rwSrw- 1 loris www-data  27954 févr. 13  2018 b.png
-rwxrwsrwx 1 loris www-data  42952 nov.  10 17:28 cat.jpeg
-rw-rwSrw- 1 loris www-data  16815 févr. 14  2018 less.png
-rwxrwsrwx 1 loris www-data 832585 nov.  12 16:58 mountains.jpeg
-rw-rwSrw- 1 loris www-data  25715 févr. 14  2018 sass.png
-rw-rwSrw- 1 loris www-data  12406 août  10  2017 w3newbie.png

My user "Loris" is member of his own group + www-data.

Then I seached firefox pid :

ps aux | grep -i firefox
loris     1331  9.4  7.1 9603660 582608 tty2   Sl+  23:29   1:49 /usr/lib/firefox-esr/firefox-esr
loris     1374  1.3  4.2 2077476 348580 tty2   Sl+  23:29   0:15 /usr/lib/firefox-esr/firefox-esr -contentproc -childID 1 -isForBrowser -boolPrefs 183:1|301:0| -stringPrefs 287:36;f00bb52d-f47f-4c99-a721-452ab6755407| -schedulerPrefs 0001,2 -greomni /usr/lib/firefox-esr/omni.ja -appomni /usr/lib/firefox-esr/browser/omni.ja -appdir /usr/lib/firefox-esr/browser 1331 true tab
loris     1430  4.7  2.6 2163164 217616 tty2   Sl+  23:29   0:54 /usr/lib/firefox-esr/firefox-esr -contentproc -childID 2 -isForBrowser -boolPrefs 183:1|301:0| -stringPrefs 287:36;f00bb52d-f47f-4c99-a721-452ab6755407| -schedulerPrefs 0001,2 -greomni /usr/lib/firefox-esr/omni.ja -appomni /usr/lib/firefox-esr/browser/omni.ja -appdir /usr/lib/firefox-esr/browser 1331 true tab
loris     1495 12.6  3.4 2004604 279472 tty2   Sl+  23:29   2:25 /usr/lib/firefox-esr/firefox-esr -contentproc -childID 3 -isForBrowser -boolPrefs 183:1|301:0| -stringPrefs 287:36;f00bb52d-f47f-4c99-a721-452ab6755407| -schedulerPrefs 0001,2 -greomni /usr/lib/firefox-esr/omni.ja -appomni /usr/lib/firefox-esr/browser/omni.ja -appdir /usr/lib/firefox-esr/browser 1331 true tab
loris     1772  1.0  3.5 2018984 290304 tty2   Sl+  23:30   0:11 /usr/lib/firefox-esr/firefox-esr -contentproc -childID 4 -isForBrowser -boolPrefs 183:1|301:0| -stringPrefs 287:36;f00bb52d-f47f-4c99-a721-452ab6755407| -schedulerPrefs 0001,2 -greomni /usr/lib/firefox-esr/omni.ja -appomni /usr/lib/firefox-esr/browser/omni.ja -appdir /usr/lib/firefox-esr/browser 1331 true tab
loris     <bold>2760</bold>  0.0  0.0  12784   964 pts/0    S+   23:48   0:00 grep -i firefox

and checked each groups of pids :

loris@eliya:~/public_html/elManel/img$ ps -o gid,rgid,supgid -p 1374
  GID  RGID SUPGID
 1000  1000 24,25,27,29,30,33,44,46,108,113,117,1000
loris@eliya:~/public_html/elManel/img$ ps -o gid,rgid,supgid -p 1430
  GID  RGID SUPGID
 1000  1000 24,25,27,29,30,33,44,46,108,113,117,1000
loris@eliya:~/public_html/elManel/img$ ps -o gid,rgid,supgid -p 1495
  GID  RGID SUPGID
 1000  1000 24,25,27,29,30,33,44,46,108,113,117,1000
loris@eliya:~/public_html/elManel/img$ ps -o gid,rgid,supgid -p 1772
  GID  RGID SUPGID
 1000  1000 24,25,27,29,30,33,44,46,108,113,117,1000
loris@eliya:~/public_html/elManel/img$ ps -o gid,rgid,supgid -p 2760
  GID  RGID SUPGID

I'm now sure that firefox processes belong to my main user's group, right ? (except for the PID 2760)

And now ... I've no idea what to do (everything looks well set up to me...)! I'm gonna spend few hours on that tonight, I keep you updated if there's anything new/relevant.

Note : another weird behavior that could help : when I try to load the picture by editing the CSS inside my browser (with the development tools), it loads perfectly. Mind blowing for a noob ahah

Thanks for your time

Blocked Profile
13 Nov 2018 à 08:36

Well, first of all, if this is being "served" as a WEB PAGE from a server, the WEB SERVICE WOULD NEED RIGHTS to the data (image), not the browser or the user. If this is a static webpage, from a folder that someone clicks on it to launch the document, the path is relative to the person that is RUNNING IT! Does that make sense?

Kamus
13 Nov 2018 à 10:15

To be honest it's not really clear to me, but that means that I have to read more and understand what's going on before hoping to develop.
I though that in linux there were only users and groups, and I've just checked, "www-data" (which I think is my web service) has all the rights to my web folder (and the folders insides folders .... until the files itselves). So to me it looks ok, but I must not be so ok
Thanks for your explanations

Blocked Profile
13 Nov 2018 à 10:27

Yes, this is the service that the server will use to read files.

Group(s)
www-data
or
www,
or apache,
or daemon.

Kamus
13 Nov 2018 à 10:43

So if my privileges are set to "Read & Write" to everything, it means that it's not a privileges issue right ?

Similar discussions

I can't open my Facebook profile

Instagram highlights not loading

Can't find contacts on instagram

Similar discussions

Subscribe To Our Newsletter!