-3

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.

Improve this question
11
  • no visible issue. are you sure about the image path ? /banner.svg vs ./banner.svg Commented Mar 31, 2022 at 9:50
  • Are you sure about the image path and name? Commented Mar 31, 2022 at 10:01
  • @jeremy-denis: I've tried both /banner.svg & ./banner.svg .. whatever differences they make, no difference made to my situation. Commented Mar 31, 2022 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 Commented Mar 31, 2022 at 12:21
  • 1
    @jeremy-denis: yes it is the svg causing error. I replaced .svg file with a .jpg and it worked. Commented Mar 31, 2022 at 14:08

7 Answers 7

Reset to default
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);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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 you can be mad all you want but that doesn't change the reality of the situation.
0

I think your image path maybe wrong

You better try this 👇🏼

CSS

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

2 Comments

your solution isnt working
Try using vh instead of % in height
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");
}
Improve this answer

2 Comments

not as easy as you have put it sir. Not working.
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.
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.

Improve this answer

2 Comments

all 3 options not working
@Oxin those are not options. They are examples of different path behaviors.
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.

Improve this answer

2 Comments

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.
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
0

Double check your image path and consider adding:

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

Comments

-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");
Improve this answer

2 Comments

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.
dont know what u r trying to say

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.