[Resolved] Full Width Featured Image for static page

[Farokh]

How can I have Full Width Featured Image for static page (Home)

[Tom]

Hi there,

This CSS might help:

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

The image has to be large enough to be full screen for it to work though.

[Farokh]

Added the CSS, but only the left side is full width. The right side of the featured imageis still white area.
image size: 1200×600
container width: 1200 px
lingaline.com

[Tom]

The image isn’t wide enough to span across the entire page.

You can force it to be, but the quality will suffer:

.page-header-image.grid-container img {
    width: 100%;
}

[Farokh]

what image width do you suggest?

[Tom]

Honestly, it would have to be quite wide to accommodate all screen sizes.

The issue with that is load time.. You could try something like 1500px wide, and then apply the 100% width I provided above to force it to go the extra little bit.

[Farokh]

UPDATE;

The second CSS didn’t help much (white areas on both sides now); however, I used a bigger image (1400×800) plus the first CSS following your advice, and now it’s alright, full width 🙂
Thanks

[Tom]

Awesome, glad you got it working 🙂

[Farokh]

Regarding the load time, I use image editors to reduce size without sacrificing quality; 1200@100kb & 1400@136kb

[Tom]

Perfect. You can use a website like Optimizilla to reduce the size even more 🙂

[Author]

Posts