没有显示的背景css图象

Question

I have a link on my HTML page that I want like to display. The icon is not appearing and I'm not sure why. The image icon is located in a sub folder within my project and it can be found (double checked). I'm using the brackets IDE.

Html file:

  <div class="delivery"><a href="Delivery-Options.html">£2.99 Delivery >>More info</a></div>

Css file:

.delivery {
           float:left; width:59%; padding-left:48px;
           background:#ccc; background-image: url(images/delivery.jpg) 8px center;
          }

Answer 1

background-image does not accept the shorthand you are using. Change to background instead.

As pointed out by @Gezzasa in the comment, using background shorthand will overwrite a previous background-color . Updated snippet shows both. Note that the colour should appear after the image.

 .delivery { float: left; width: 59%; padding-left: 48px; background: url(https://picsum.photos/200/300) #ccc; background-repeat: no-repeat; background-position: 8px center; } 

 <div class="delivery"><a href="Delivery-Options.html">£2.99 Delivery >>More info</a></div> 

Answer 2

You're using background position in your background-image param.

Remove that and put it in to background-position

ex: background-position: 8px center; background-image: url(images/delivery.jpg); background-position: 8px center; background-image: url(images/delivery.jpg);

Answer 3

This shows the image on left side as icon. You can change the background-size.

.delivery {
        width:59%; 
        padding-left:48px;
        background-size: 18px 18px;
        background-image:url(coffee.jpg) ;
        background-repeat: no-repeat;
    }

html

<div class="delivery"><a href="Delivery-Options.html">£2.99 Delivery >>More info</a></div>