Archived topic
Full width image in section using CSS
5 replies · Started by Joseph on May 7, 2019
Challenged on adding a full-width image at the bottom of a section. I used CSS to do this but cannot seem to find the solution to make the background image fullscreen. Tried using grid-container with no luck. Any help is welcomed.
The background image I speak of is the Barbara Bush quote under the social media columns
Thanks in advance.
Hi there,
so you would need to make the Sections inner container full width.
Then wrap your heading and three columns like so to make them contained:
<div class="grid-container">
<!-- heading and three columns HTML in here -->
</div>This will allow the socialbottom to be full width.
Thank you for your quick response David.
I had tried full screen on the inner container with the grid container as mentioned and as you suggested. I still get this result. The gap on the left and right margin of the background. I tried setting both right and left margins at O on the socialbottom class in CSS to no avail.
see attached (red down arrows)
https://provinciaclient.com/m4a/work/m4a_bg.png
Give that section a Custom Class on the settings tab of no-padding and then add this CSS:
.no-padding .generate-sections-inside-container {
padding-left: 0;
padding-right: 0;
} Thank you, David!! That did the trick.
Much appreciated.
Glad to be of help.
