SET background-image to a div in css

Question

Whats wrong with following code, why is background image not showing:

HTML

<div class="logo"> E  </div>

CSS

.logo
{
    height: 100%;
    width: 100%;
    background-image: url("/banner.svg");
}

No rocket science, by using Brackets editor, simply trying to add background-image to a div. Image file is in the same folder as .html and .css file.

no visible issue. are you sure about the image path ? /banner.svg vs ./banner.svg — jeremy-denis, Mar 31 '22 at 09:50
@jeremy-denis: I've tried both /banner.svg & ./banner.svg .. whatever differences they make, no difference made to my situation. — Oxin, Mar 31 '22 at 12:19
@ShahriarHossain: Yes. image path and name are correct. If you have a method in your mind for testing that out, please mention. Thanks — Oxin, Mar 31 '22 at 12:21
@Roy: No your link doesn't answer my question. I have tried that solution with no success. — Oxin, Mar 31 '22 at 12:21
Could you share your site structure ? in which folder is your image and where is the html and css that load it — jeremy-denis, Mar 31 '22 at 12:28
Does this answer your questions? https://stackoverflow.com/questions/41023616/why-doesnt-my-svg-background-image-work — jeremy-denis, Mar 31 '22 at 12:51
Can you open the network inspector and see where it is trying to load the image from? You should see a 404 (or similar) error and the path it is trying to go to. — siride, Mar 31 '22 at 12:51
Can you confirm that the div actually has a width and height by using the inspector? — siride, Mar 31 '22 at 12:53
@jeremy-denis: yes it is the svg causing error. I replaced .svg file with a .jpg and it worked. — Oxin, Mar 31 '22 at 14:08

score 1 · Answer 1 · answered Mar 31 '22 at 09:59

1

i assume your image-link is wrong. You could try to colorize the background to see if its really image related:

background-image: linear-gradient(red, yellow, blue);

answered Mar 31 '22 at 09:59

iHalla

64
4

sure your linear-gradient is showing up on the div. why the hell is my given path wrong and why the hell is whole web is filled with the "WRONG PATH" answer? – Oxin Mar 31 '22 at 12:11
1

@Oxin you can be mad all you want but that doesn't change the reality of the situation. – siride Mar 31 '22 at 12:50

score 0 · Answer 2 · answered Mar 31 '22 at 10:05

0

I think your image path maybe wrong

You better try this

CSS

.logo {
    height: 100%;
    width: 100%;
    background-image: url("./banner.svg");
}

answered Mar 31 '22 at 10:05

Afshar Sharifi

152
1
7

your solution isnt working – Oxin Mar 31 '22 at 12:52
Try using vh instead of % in height – Afshar Sharifi Apr 01 '22 at 11:13

score 0 · Answer 3 · answered Mar 31 '22 at 10:05

0

As your image is in the same folder as your code you don't need that /

<div class="logo"> E  </div>
CSS

.logo
{
    height: 100%;
    width: 100%;
    background-image: url("banner.svg");
}

answered Mar 31 '22 at 10:05

A Haworth

30,908
4
11
14

not as easy as you have put it sir. Not working. – Oxin Mar 31 '22 at 12:23
It works for me so I suspect your banner.svg is not in the same folder as your html code OR your svg is corrupt in some way. – A Haworth Mar 31 '22 at 14:49

score 0 · Answer 4 · answered Mar 31 '22 at 10:06

0

There seems to be no problem in the code. The url to the image must be wrong. Check the path again. NOTE:

/ is the root of the current drive;
./ is the current directory;
../ is the parent of the current directory.

answered Mar 31 '22 at 10:06

Prateek p

117
1
11

all 3 options not working – Oxin Mar 31 '22 at 12:43
@Oxin those are not options. They are examples of different path behaviors. – siride Mar 31 '22 at 12:49

score 0 · Answer 5 · answered Mar 31 '22 at 10:12

0

The code looks okay but you might want to check the image URL. "/banner.svg" means the image is in the same directory as the CSS file, if it's not then correct the image URL. You might also want to check the image extension is it really svg or png? If you think the URL is correct then try adding a background color of red to the logo class and you'll know where the issue lies.

answered Mar 31 '22 at 10:12

Lowe Silvan

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 31 '22 at 10:24
`background-color` property is easily set on div but `background-image` is unnecessarily not working. I have made sure to check .svg extension as well as its placement in the same folder as .cs file. no fruits – Oxin Mar 31 '22 at 12:28

isla_just · Answer 6 · 2022-03-31T13:39:50.137

0

Double check your image path and consider adding:

.logo {
  background-image: url(banner.svg);
  background-position: 100% 100%;
  background-size: cover;
}

edited Mar 31 '22 at 13:39

answered Mar 31 '22 at 12:54

isla_just

41
6

nexus · Answer 7 · 2022-03-31T10:48:55.503

-1

Ah, if you run it just on a static HTML but not in a server, you can modify like this:

 background-image: url("banner.svg");

edited Mar 31 '22 at 10:48

answered Mar 31 '22 at 10:07

nexus

1
2

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 31 '22 at 10:28
dont know what u r trying to say – Oxin Mar 31 '22 at 12:43

SET background-image to a div in css

7 Answers7

CSS