How to take the edge of an image as a link

Asked

Viewed 1,154 times

2

Hi, I know it sounds like a silly problem, but I’ve tried everything and searched everything! I can’t get this edge out of my image. 

body {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    
}
a img {
    border: none;
    outline: none;
}
a {
    border: none;
    outline: none;
}
header{
    height: 60px;
    width: 100%;
    background-color: black;
}
.logo {
    background: url(https://img.icons8.com/) no-repeat;
    position: relative;
    top: 5px;
    left: 5px;
    border: none;
    outline: none;
    width: 100px;
    height: 50px;
}
<html lang="pt">

<head>
    <title>Teste</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header class="header">
        <div class="logo-radical"><a href="#">
            <img class="logo"></a></div>
    </header>
</body>

</html>

html css image css-border

2 answers

1

Need to remove link edge (a) and not the image ( img), so the correct selector would be:

a {
  border: none;
  outline: none;
 }


a {
   outline : none;
   border: none
 }
<a href="#">
  <img src="https://img.icons8.com/officel/80/000000/download-2.png">
</a>

  • I removed the edge of the two, the image and the link but it still doesn’t work, I’m using an image class because I intend to change it through js, but it seems that this edge doesn’t come out at all :/

  • this code works for me, so to help you better need to replicate exactly your problem, can do this by placing the code with the image here on the site?

  • Okay, I put an image

0


Boy your problem is so obvious that I hardly saw rss

You’re putting a background-imagem on the tag <img>, so despite the image render, the user-agente browser creates that border which would be the full size of the tag <img>.

The image is an external element, somehow embedded in the code, the content it renders inside the image is not in the HTML, the tag <img> is a container that will receive and render the external image, in addition other elements are not allowed within the tag <img>, and so, just like the tag <input> the tag <img> has no closing tag </img> These elements are known as void Elements https://html.spec.whatwg.org/multipage/syntax.html#void-Elements

inserir a descrição da imagem aqui

If you want to wear one background-image, don’t put it right on the tag <img>, tag <span> for example, that tb is an element inline as well as the image.

The attribute SRC specifies the URI for the image to be entered. Its syntax is the same as the attribute HREF tag <A>. SRC is mandatory.

Source: https://www.w3.org/MarkUp/html3/img.html

The image you want to call on the tag <img> always must be declared by the attribute src="" HTML itself, not CSS with the property background-image. In addition, the attribute src="" is required on the tag <img> and should not be omitted in favour of a background-image

  • Perfect! The problem is that I wanted to put a clickable logo that would then be replaced by another logo, I thought of doing this by adding a class in the <img> tag but it didn’t work, but using the <span> tag as suggested worked! Thank you for your attention.

  • @Wingeds if you think you have solved the problem consider marking the answer as accepted in this icon ✔ below the arrows of the answer you choose, so it is not pending on the site as unanswered question accepted even having already been resolved. [] s

Browser other questions tagged html css image css-border

You are not signed in. Login or sign up in order to post.