Archived topic
adequate image resolution (banner/header)
3 replies · Started by Max on April 12, 2020
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!
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/
Hi Leo,
That is a great suggestion - thank you!
Best regards and stay healthy!
No problem :)
