Responsive header images under menu

[peterluit]

Hi,

I don’t know if I am here at the right place. But I watched the movie where images are uploaded in the header area and ‘under’ the menu (per page). I very much like that possibility. However, I want those images to be responsive. For as far as I can see, now they are not. Could someone help me with that?

Peter Luit

[Tom]

Hi Peter,

I’m assuming you’re talking about the Page Header add-on?

Regular images are always responsive.

If the images are part of a background, then the area is responsive, but the image handles it a bit differently (this is due to the way HTML/CSS background images work).

[peterluit]

Hi Tom,

Please have a look at this page: https://www.peterluit.nl/proloog/
The background image is not responsive in my opinion. Did I do something wrong here? Im am new to your theme and plugin.

Thanks for looking,

Peter

[Tom]

Sorry about that, I meant background images generally aren’t responsive.

Background images depend on aspect ratio, so as the aspect ratio changes (screen becoming more narrow), less of the image will show as it tries to adjust.

It doesn’t look terrible though? Most of the image is still shown and it keeps the effect in my opinion.

It becomes a problem when people have text in their background image, which obviously won’t always show when the aspect ratio changes.

[peterluit]

Well, images are more important in many cases. And you can make it work, with just enought width and height, even combined with a ‘call-out’ text. Have a look at http://www.ernstmerhottein.com/ for an example I made. Most if the images remain visible, although depending on the ‘call-out’ text, but in my opinion better than just ‘leave the image’ in it’s original height and width….

What do you think?

Kind Regards, have a nice weekend on your beautiful island!

Peter

• This reply was modified 8 years ago by peterluit.

[Tom]

The CSS settings between that bg image and the one on your GP site are nearly identical. The difference is that the GP site has the image full screen so the aspect ratio is different.

As I downsize, most of the image stays visible for me – much better than some I’ve seen. Which important part of the image is hiding?

Pretty much your only option is to apply a background specifically made for mobile with some CSS:

.page-id-11 .generate-content-header {
    background-image: url(URL TO YOUR MOBILE BACKGROUND);
}

We’ve been very lucky with the weather here the last few days! Been enjoying some walks by the water 🙂

Hope you enjoy your weekend!

[Author]

Posts