Archived topic
How to add full screen Image in a webpage
7 replies · Started by Disha on January 30, 2023
Hi there,
I am using a Page hero. I want to create a page , where below page hero, I am trying to add fit-to-screen image. I tried using container and setting the image as background. but its not taking the full screen.
I tried using GB Image and styling it as cover, but the sides are still empty. Image size is 1587x2248.
What do I need to use here?
Thanks
Disha Gupta
Hi there,
In the GB Image Block, set jsut the width to 100% and set the Object Fit to: Cover
Hi,
I Tried this. It gives same result.
Image at
The Pink image is container with background image.
The black image is GP image with width 100% set as cover.
Thanks
Disha
That image link is not working - can you check the link?
And if you can share a link to your site where the problem is, i can take a closer look
Hi,
can you access this. I have put site under maintenance.
The pink tree part is container with background as image.
The black is GB Image with the suggestion you provided above.
You can take a look at this
I am trying the same thing and unable to complete it.
Thanks
Disha
Hi Disha,
In order to make images or containers go full width, the page's content container needs to be set to full width.
You can do so via the layout metabox in the page editor:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it
Thanks
No Problem :)