[Resolved] Page Header Image looking bad

[Juan]

Hi, how are you doing?

I’m neither a designer nor a programmer, so I know I’m probably drowning in a glass of water. The thing is I can’t get an image in the page header to look good. Everytime I upload an image (either via gp_elements or setting it as the feature image of the post and uploading it directly in the page section) to be the “header image” of a page, its quality gets degraded and it looks blurry and pixelated.

I tried several image sizes, such as any height with the total width of the page (I think is 1008 px) and some sizes that I got from the Google Chrome console.

Anyway, I never seem to get it right and I would like to understand the logic beyond this particular case. I read the tutorial about page headers, but it didn’t seem to help me figure out the issue.

I paste you the link to an URL in my website where you can see an example of a page header image not working.

Kind regards and hope you’re doing well,
Juan

[Leo]

Hi there,

Page header is using background image which isn’t responsive by default so it’s tough to deal with sometimes.

Are you going to add any content on top of the page header?

If not would you consider using the default featured image instead (static image/responsive)?

Let me know 🙂

[Juan]

That could definitely be a good solution, the thing is the main reason I was using page header and not featured image for this is that page header allowed me to put the image in full width (which looks much better) and I can’t seem to do that uploading the image as a featured image.

I just changed the image in the URL I gave you before uploading it via featured image, so you can see the difference between that (not full width) vs. the main banner in home page, for example, which was uploaded using page header (full width).

If you can point me in some direction to get the featured image be full width that could certainly be an easy solution, if not I’ll have to keep dealing with page header and we’re back to square one.

Thank you for your help,
Juan

[Leo]

Try this CSS:

.featured-image.grid-container {
    max-width: 100%;
}

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

Then you will need to make sure your image is wide enough so it’s full width.

[Juan]

Thank you so much, Leo, I just tried it with a sample image and seems to work perfect. You’re the best.

I’m marking this topic as resolved for now, I’ll let you know if I have any more issues.

Kind regards,
Juan

[Leo]

No problem 🙂

[Author]

Posts