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

Question

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!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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!

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

Sign up