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;
}
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!