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!
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
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!
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download