CSS "background-image" property won't display the image-CodePudding

I'm woriking on a site, and trying to make a sidebar in which I put my image before some text in

<a> </a> tags

I've made a new empty project to test if I messed up something in my previous one, but no Even in a new empty one background image won't show itself here is the code:

<a href='#' title='Građevinski radovi'><span style="background-image: url('./Ikonice/GRADJEVINA.svg')"></span><span class='Title'>Gradjevinski radovi</span></a>

I am working in VS CODE and using "Live Server" extension, saw somewhere on here that might cause a problem, so I opened html noramally without live server, still no luck.

Image of the project

WHAT I TRIED:

I tried putting two dots ".." before the first "/, also tried putting the image in the same folder as "index.html", and not in the "ikonice" folder, but it won't work. Also tried changing

backgroung-image: url 

to

background: url

CodePudding user response：

The problem is that a span has no size by itself. It grows to its content's size. In your example, there is no content so the span will be of 0px width.

Here's a display of the problem, using just background color but the same is valid for images. I put two divs, one red and one blue, we can only see the blue one since it has text in it.

<span style="background:red;"></span>

<span style="background:lightblue;">Test</span>

If you do not want to put text inside, you'll have to give it a width and a height. But since a span is meant to display inline, you'll need to change that too with display:inline-block or display:block

CodePudding user response：

span with text it shows background image

<a href="#"> 
     <span style="background-image: url('https://picsum.photos/300/200.jpg')">LOREMLOREM</span>
     <span class='Title'>Gradjevinski radovi</span>
</a>

span without text it shows nothing since the span itself has no size

 <a href="#"> 
   <span style="background-image: url('https://picsum.photos/300/200.jpg')"></span>
   <span class='Title'>Gradjevinski radovi</span>
</a>

so add some text in your span with background-image