[Resolved] adequate image resolution (banner/header)

Home Forums Support adequate image resolution (banner/header)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1236342
    Max

    Hi there,

    I am using the latest GP Premium but still WP version 5.3. I took at look at the forum but could not find a solution/answer for/to my problem/question.

    I have a custom header (height 300px) and would like to display a banner image which should look good on different screen resolutions (up to 4k, so 3840px width) if possible.
    Is there a way to select different images to be loaded for different screen resolutions or can I only select one image to be used which then gets cropped depending on the according screen resolution?

    Of course I could simply upload a 4k-width banner (I have enabled a test image at the moment) but then the image will not get displayed correctly when it comes down to a 1920px width etc. – so only portions of the image get displayed. Vice versa the image would simply get stretched which would not look good at all of course. So do I basically have to decide between a sharp 4k resolution which lets the image get displayed incorrectly in Full HD and a standard Full HD resolution which would look quite blurry in 4K or is there another method?

    Thank you for your time and Happy Easter in case you are celebrating!

    #1236411
    Leo
    Staff
    Customer Support

    Hi there,

    Are you referring to the page hero?

    If so you can write multiple media queries for it. For example:

    @media (min-width: 2000px) {
        .page-hero {    
            background-image: url(https://IMAGE-URL);
        }
    }
    @media (min-width: 1500px) and (max-width: 1999px) {
        .page-hero {    
            background-image: url(https://IMAGE-URL);
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1236451
    Max

    Hi Leo,

    That is a great suggestion – thank you!

    Best regards and stay healthy!

    #1236786
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.