Is there a better way of doing this?

Hi,

Is there a better way of doing the below?

The Allsops logo is above the header and the welcome content.

I edited the header.php file and put the following:

<div align="center" class="allsops-logo">
					<img src="https://localhost/img/Allsops_Logo.png"/>
					</div>	

That’s in between the content and the header.

Here is the CSS I used:

.site-header{
position: relative;
z-index: 1;
}

.site-content{
position: relative;
z-index: 0;
margin-top: -55px;
}

.allsops-logo{
position: relative;
z-index: 1;
height: 104px;
width: 500px;
margin: auto;
margin-top: -55px;
}

#post-24{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} 

@media (min-width:768px) { .allsops-logo { height: 500px; width: 104px } }
@media (max-width:66.4989378333em) { .allsops-logo { height: 60%; width: 60%; margin-top: -30px; } }
@media (max-width:568px) { .allsops-logo { height: 60%; width: 60%; margin-top: -25px; } }

I’m also struggling to get this to be responsive to other devices. It won’t resize to how I want it.

Any advice to improve this?

The margin-top: -55px; seems to be a bit of a pain when on devices as it shows a white gap sometimes where the value should be different for different screens.

Many Thanks,
Danny