href For Image Goes Beyond Image In HTML website with CSS - html

Question

I am making an html website and trying to make the website so when you click the image it takes you to another website. This is the code I have in index.html
<a href="https://www.youtube.com/">
<div class="metFinLogo"></div>
</a>
and in css
.metFinLogo{
background-image: url('./images/metFinLogoImg.png');
background-size:contain;
width: 250px;
height:200px;
margin: 5%;
background-repeat: no-repeat;
}
When I open index.html the image can still be selected even outside image. I need help to make it so that only clicking where there is image sends to link.

Answer 1

The <div> tag is a block level element. It will work if you add display: inline-block to .metFinLogo
.metFinLogo{
background-image: url('./images/metFinLogoImg.png');
background-size:contain;
width: 250px;
height:200px;
margin: 5%;
background-repeat: no-repeat;
display: inline-block;
}

Answer 2

inline-block It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values.
.metFinLogo{
display:inline-block;
}
.metFinLogo{
background-image: url('https://static.remove.bg/remove-bg-web/6cc620ebfb5922c21227f533a09d892abd65defa/assets/start_remove-c851bdf8d3127a24e2d137a55b1b427378cd17385b01aec6e59d5d4b5f39d2ec.png');
background-size:contain;
width: 250px;
height:200px;
margin: 5%;
background-repeat: no-repeat;
display: inline-block;
}
<a href="https://www.youtube.com/">
<div class="metFinLogo"></div>
</a>