Website-headers desktop 'similar' to the headers on mobile (iPad)

Hello suportteam,

Is there a (CSS) adjustment to get the website-headers on the desktop version ‘similar’ to the headers on the tablet? (Perth-Pro theme)

Now I use a visual 1300px x 500 px for both devices. But on the screen the headers are not similar…

Visual:
http://www.tjeerdengel.nl/headers-Perth-Pro-theme.jpg

Site: http://letterleven.nl/
Login: [hidden]
Password: [hidden]

Duplicate topic with this one (resolved).

Hello Kharis,

I have still ‘problem’ with de headers (image) on the different devices.

For example:
On the iPad Pro (horizontal) the header visuals (zoom) is ‘huge’… (Vertical is okay)

http://www.tjeerdengel.nl/headers.jpg

How can I (with CSS) make the Header-images similar on all devices?

Hello there,

The header image is actually a cover background that scales depending on the screen width to cover the entire header container. It is really problematic when the center part of your image is the most important spot to see. To tackle this situation, you need to replace the default image with the new one with more visibility on its center part. It can be achieved by adding the following custom CSS code:


@media only screen and (min-width:1024px) {
	
	.header-image {
		background-image: url(https://yoursite.com/path/to/new-header-image.jpg) !important;
	}
	
}

Upload your image into the media library (WP Admin > Media > Library) and replace the example image address in the code above with it.

Regards,
Kharis