Background images (Headers - Moblile)

Hello support team,

The header images (background images) have a poor resolution views on the iPad.

iPad (Pro)

Desktop:

How can I make the header images for mobile narrower so that the resolution is better (and also the composition?)

Project: https://www.altijd-buiten.nl

Thanks

Tjeerd

Hello Tjeerd,

What is the dimension of your image file before upload? Is it large enough?

Regards,
Kharis

Hello Kharis

The (original) dimension of (this) picture is: 3264px × 2448px.

https://www.altijd-buiten.nl/wp-content/uploads/2017/07/IMG_1900.jpg

Does WordPress (or the Perth Pro template) not scale these images back to a lower dimension (for Mobile)? On desktop it is okay.

Can I set the maximum dimension of this (kind of) image-headers (and backgrond) images by CSS?

Thanks for hour help :slight_smile:

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .header-image.single-header-image {
      background-position: top center !important;
    }

Regards,
Kharis

Hello Kharis,

Thanks for your help. Unfortunately the solution does not work. How can I scale the background photos ‘smaller’ in the headers (by CSS)? I expect that can be the solution. What would the CSS code be?

Hello, try to use the following CSS code instead of the previous.

You can add CSS code in Customize → Additional CSS section.

@media (orientation: portrait) {
    .header-image {
        background-attachment: scroll;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Thanks Roman,

It is solved :blush:

I only see that on the homepage (https://www.altijd-buiten.nl) the same thing happened with the background photo in one of the blocks:

Do you also have a CSS code for that problem?

Do you also have a CSS code for that problem?

Sure, try to use this CSS code instead of the previous one:

@media (orientation: portrait) {
    .header-image,
    .panel-row-style {
        background-attachment: scroll !important;
    }
}

Kind Regards, Roman.
aThemes Support

Thank you, Roman. Completely happy !

You are welcome! :slight_smile:

Kind Regards, Roman.
aThemes Support