Archived topic
Full Width Featured Image for static page
9 replies · Started by Farokh on November 11, 2016
How can I have Full Width Featured Image for static page (Home)
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.
Added the CSS, but only the left side is full width. The right side of the featured imageis still white area.
image size: 1200x600
container width: 1200 px
lingaline.com
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%;
}
what image width do you suggest?
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.
UPDATE;
The second CSS didn't help much (white areas on both sides now); however, I used a bigger image (1400x800) plus the first CSS following your advice, and now it's alright, full width :)
Thanks
Awesome, glad you got it working :)
Regarding the load time, I use image editors to reduce size without sacrificing quality; 1200@100kb & 1400@136kb
Perfect. You can use a website like Optimizilla to reduce the size even more :)