Jaiden Jaiden - 5 days ago 5
CSS Question

How to place an image in a header surrounded by an anchor tag and make the image but not the entire space a link

I have started a simple project and have created a basic header, the header has a background which is set with css and a logo using the img element which is inside the header tag. However, the img element is surrounded by an hyperlink tag to make the logo clickable to re-direct to the homepage, but when I use the code that is shown below, the entire header becomes a link.

I am also using bootstrap if that is any cause of the issue.

https://jsfiddle.net/sovmr6rs/

<header class="header">
<a href="https://google.com.au">
<img class="logo" src="assets/images/logo.png" alt="Server Logo">
</a>
</header>

.header {
background-image: url("../../images/headerBackground.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.logo {
width: 25%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}


I would appreciate any replies that can help guide me to troubleshoot this issue.

Thanks!

Answer

Remove display: block; from .logo and add text-align: center to .header. Here is the updated Fiddle.

Just like:

.header {
  text-align: center;
}

.logo {
  width: 25%;
  height: auto;
  margin: 0 auto;
}

Or look at the snippet below:

.header {
    background-image: url("../../images/headerBackground.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.logo {
    width: 25%;
    height: auto;
    /* display: block; */
    margin: 0 auto;
}
 <header class="header">
            <a href="https://google.com.au">
              <img class="logo" src="assets/images/logo.png" alt="Server Logo">
            </a>
    </header>

Hope this helps!

Comments