Hello! The background-image property does not work in the css file. The file is located in the css folder. css / style.css

body { background-image: url(img/a.png); }

index.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Page</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> </body> </html>

But in the html file itself, the background-image property works.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Page</title> <style> body { background-image: url(img/a.png); } </style> </head> <body> </body> </html>

Tell me why it does not work if I place in the css file?

  • You do not correctly prescribe the path! - soledar10

7 answers 7

write in css file

 body { background-image: url(../img/a.png); /* выходим из папки css на уровень вверх, и заходим в папку img */ }
  • Thank! It works now. That's why in index.html it works without going up one level (../), I don’t understand ... - Anton121212
  • 2
    @ Anton121212, because index.html is on the same level as the img folder. And so in index.html the path will look straight img / a.png - mountpoint
  • Thank! I got it! - Anton121212
  • But do not forget that being on the server, the dots are not needed and img should be put before the "/" - pepel_xD

Between the tags <head> you have incorrectly written a link to the CSS file. Your code should look like this:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Page</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> </body> </html>

As you can see, you did not add type="text/css" in the link tag.

  • HTML5 is considered to be correct. In HTML4, of course not. - Anton121212
  • Yes, and I did not notice that the TC css is in a different folder. Also my mistake. :) - intro94 pm
  body { background-image: url(../img/a.png); }

http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki

  • Thank! It works now. That's why in index.html it works without going up one level (../), I don’t understand ... - Anton121212

I tried for half a day

 background-image: url(../img/a.png); background-image: url("../img/a.png");

, but it turns out to be like this

 background-image: url('../img/a.png');

everything worked;)

    Hello. There was the same problem: backgrounf-image did not work: url (link). I suffered 2 hours, tried everything, any modifications, but the problem remained. The error was that the path to the picture (file) was not correctly indicated, and how it did not try - nothing helped. Then, when I started thinking that html and css are not mine, I suddenly had the idea to get into the settings. I use Notepad ++ and found this: in the "Path by default" it was noted "remember the last directory", I moved the mark to "follow the current document", and in the selector value background-image I indicated a folder and file: background-image: url (images / 1.jpg) And it all worked. I hope someone help infa.

      Judging by the name of the style you need the background of the page. If it does not work, then check whether the correct path to the picture. that is, ../img/a.png or /img/a.png

       body { margin: 0; padding: 0; background: url("img/a.png") repeat scroll left top #FFFFFF; overflow-y: scroll; }
      • If it does not work, then check whether the correct path to the picture. that is ../img/a.png or /img/a.png - cnofss

      Indicating the size of the background image can help.

       .image { background-image: url(img/a.png); width: 50px; /* ширина */ height: 50px; /* высота */ }