[Resolved] Responsive Page Header

[Clare]

Hi Tom,

Probably another dim question, but I have set my page header thingy with the transparent background etc, but when I look at it on mobile it doesn’t show the whole image just a section of the image. How do I make my image responsive to the mobile device?
Thanks so much
#technologicalhalfwit

[Tom]

Unfortunately that’s just the nature of background images – it has to do with the aspect ratio.

The ratio on a desktop is different than on mobile, but the image still has to fill the area, so certain part of it aren’t shown.

One solution is to create an image just for mobile, then apply it using some CSS:

@media (max-width: 768px) {
    .blog .generate-content-header {
        background-image: url( 'URL TO YOUR MOBILE BACKGROUND IMAGE' );
    }
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Clare]

You’re a star, Tom! Thank you for that. If I feel brave, I may try it, or I may just let it look a little weird on the mobile site, it’s not a big issue really.
Thank you so much for all your help – really appreciate it 🙂
#completelyconfusedtechnologicalhalfwit

[Tom]

Happy to help 🙂

[AMBTL]

I have the same issue. Before purchasing the premium version I tested resizing the browser window on this page: http://demo.generatepress.com/about/ and the header image seemed responsive to me… But I can not achieve the same in full width mode and merging with navigation…

I have been buying “heavy” themes from other sources for years, and when I found Generatepress I was positively surprised by the elegance of its flat design and how lightweight it was. I thought the theme had some 95% of the features that I usually use and that I would be able to easily customize the rest myself. So, I thought I had found the Holy Grail of themes… but I must admit that the header behavior is disappointing…

To be fair, as I recently found out, for some reason many themes seem to have a problem with responsive title backgrounds a.k.a. page headers. But I use the Bridge theme for other projects, and somehow it is ridiculously simple there. I just upload the header image for each page or post (I usually use 1:5 or 1:4 aspect ratio). Then I check the box “Make the background responsive” and that’s it! The header background image resizes beautifully and the aspect ratio is always constant. No crops whatsoever. Here is their demo:
http://bridgelanding.qodeinteractive.com/bridge-elements/responsive-title-image/

Tom, you have created a fantastic theme and I was thinking about using it in most of my new projects… But my sites rely on images and unpredictable crops are a deal breaker for me… I cannot fix it in CSS for every page/post… If the guys from Bridge can achieve that, it can’t be rocket science… So my hope is that one day it will be possible also in GeneratePress… Or perhaps in the latest version it is already possible and I just cannot figure it out… I really wish I could switch to GP completely…

[Tom]

The way they’ve achieved the responsive “background” image there is a little hacky, using absolute positioning. I wouldn’t really feel comfortable adding something like that to the theme as the result across browsers would be worrying. You also run into responsive issues like this: https://www.screencast.com/t/iVDL2OsaT

The issue isn’t so much the theme (or any theme), it’s how background images work.

One thing you can do which should definitely help is center align your background images:

.generate-content-header {
    background-position: center center;
}

While it won’t show the entire image (again, aspect ratio), it will keep the center of the image within view at all times.

[AMBTL]

Thanks Tom.
Well, the key to avoid such issues as in your screenshot is choosing a font that is not too big and text that is not too long. I think I created more than 50 pages with such headers and never saw any issues. My titles were always single-line, centered and the font size was not too big. It works fine, as I am concerned. At least I can control the final result.

With cropped images I lose that control, and it becomes a real art to choose such background photos that won’t suck after random cropping. Seascapes and landscapes with not too many features are perhaps fine, but that is not always desired…

Cheers

[AMBTL]

I’ve just recalled that there is a trick to make youtube/vimeo videos responsive, while maintaining the 16:9 aspect ratio.

#element
{position: relative;
height: 0;
padding: 56.25% 0 0 0;
}

Perhaps the same logic can be applied to use a global aspect ratio for all header backgrounds?
I suppose an aspect ratio of 1:5 would then require “padding: 20% 0 0 0;” or “padding: 10% 0 10% 0;”.
I changed the theme, can’t test it at the moment.

[Tom]

Not sure what would work with background images.

This might: http://stackoverflow.com/questions/12609110/responsive-css-background-images

[AMBTL]

I think a workaround for me will be a full-width slider, at least for such images where aspect ratio is important. I tested with Slider Revolution and it looks good. Now I will have to find the fastest slider that will do the job.

[Author]

Posts