0

I am trying to add a background-image to "a" links inside a "div" but the image is not being displayed.

I also tripple checked the img path and it is ok.

What I tried is the following:

div a[href^='htt'] {
  margin-left: $basismarge*4;
  background-image: url("../../public_html/oefeningen/images/www.png");
}

This is a part of the index.html code:

<div>
    <div>
        <h1><a href="mailto:info@thomasmore.be">CSS3 Oefening 1</a></h1>
        <span>Welkom</span>
    </div>

    <div>
        <h2>&copy; <a href="http://www.thomasmore.be/">Thomas More</a></h2>
    </div>
</div>
<p><a href="../index.html"><i class="fas fa-home fa-3x"></i></a></p>
</body>```

With this I would have expected that the image would be showing.
Legliez
  • 5
  • 1
  • What you have seems reasonable, could you make a small working (or, not working as the case may be) example to show us the problem? It could be a number of simple things, but we can't give specific help without seeing the issue first hand. – DBS Jun 02 '19 at 11:05
  • 1
    Possible duplicate of [CSS Background Image Not Displaying](https://stackoverflow.com/questions/14029277/css-background-image-not-displaying) – Hamed Moghadasi Jun 02 '19 at 11:13

1 Answers1

1

It should work fine and it does with my own image. Try using an external image address to validate. Most probably there is something wrong with your url path. Check the Network tab in the Development tools to see if you're actually fetching the image properly.

If the path is valid and you're fetching the image properly after all, check if the image is not actually displayed but blending in with the styles you have for the link and its parents(for example the image upper left corner and the anchor element both have white background).

zhulien
  • 5,145
  • 3
  • 22
  • 36