How to set the background image to the containing snap element?

I am trying to create a link with the background of the image, the question is, is the image too large, how do I match its width and height of the anchor with css?

<a href="#"></a>
<style>
 a
 {  
    display: block;
    padding: 5px 12px;
    border: 1px solid black;
    width: 10px;
    height: 10px;
    background-image: url('/Scripts/images/downarrow_blue.png');
    }
</style>

TIA, Lina

+3
source share
1 answer

Background images in CSS 2.1 cannot be modified, although CSS 3 supports a property background-sizethat it is not widely implemented.

background-size: 10px 10px;

An obvious alternative is to simply use a tag <img>:

<a href="#"><img src="mybg.png" alt="" style="width:10px; height:10px" /></a>    

But you probably have a reason not to do this anyway, right?

Other alternatives may be

  • Resize the item <a>to the size of the image.
  • Resize the image locally and upload it under a different file name.
  • , PHP ASP, .
+5

Source: https://habr.com/ru/post/1742089/


All Articles