Question

Setup: I have this website with a top-header image that needs to resize properly depending on screen-size. This is the code I’m using:

HTML:

<img class="header-background" src="<?php echo get_template_directory_uri() . '/images/header.png';?>" alt="Header" />

CSS:

.header-background {
left: 0;
margin: auto;
right: 0;
position: absolute;
z-index: 91;
width: 100%;
margin-top: -35px;
}   

Problem: The image size is 1900×227 pixels and I need it to resize properly depending on the resolution of each user.

This is how it supposed to look like. The blue top should remain the same on every resolution.

Would it be easier to replace the image with a CSS background / shape?

Answer 1

You can add a static height like height:200px.

(Thats what I have found that works best on my computer).