Home html Background-image doesn't work

Background-image doesn’t work

Author

Date

Category

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

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

index.html

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
 & lt; meta charset = "utf-8" / & gt;
 & lt; title & gt; New Page & lt; / title & gt;
 & lt; link href = "css / style.css" rel = "stylesheet" / & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; / body & gt;
& lt; / html & gt;

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

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

Answer 1, authority 100%

in the css file, write

body {
  background-image: url (../ img / a.png); / * exit the css folder one level up, and go to the img folder * /
}

Answer 2, authority 33%

Between & lt; head & gt; tags, you have an incorrect CSS file link.
Your code should look like this:

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

Answer 3

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

Answer 4

I tried it for half a day

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

, but it turns out it is necessary like this

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

everything worked;)


Answer 5

Hello everyone. There was the same problem: backgrounf-image: url (link) didn’t work. I suffered for 2 hours, tried everything, any modifications, but the problem remained. The error was that the path to the picture (file) was not specified correctly, and no matter how hard I tried, nothing helped. Then, when I started to think that html and css are not mine, I suddenly got the idea to get into the settings. I use Notepad ++ and found this: in the “Default path” item, “remember the last directory” was checked, I changed the checkbox to “follow the current document”, and in the value of the background-image selector I indicated the folder and file: background-image: url (images / 1.jpg)
And it all worked.
I hope someone will help infa.


Answer 6

Faced a similar problem.
Decided!
For some reason, images of the .png format are not displayed by this property, but .jpg and .webp are displayed


Answer 7

Judging by the name of the style, you want the page background.
If it does not work, then check if the path to the picture is correct. 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;
  }

Answer 8

Specifying the size of the background image can help.

. image {
  background-image: url (img / a.png);
  width: 50px; /* width */
  height: 50px; /* height */
}

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions