Archived topic
footer background image w/color overlay not displaying correctly in mobile view
3 replies · Started by Cynthia on November 7, 2020
I am using a background image in the footer with a color overlay at an opacity of 0.68. Everything displays perfectly on laptop view but image is not display correctly on mobile view.
The only way I could to get both the image and the color overlay to display was as follows:
Hook Element: wp_footer across entire site
<style>
body {
background-image: url(" IMAGE URL IS ENTERED IN PRIVATE AREA ");
background-repeat:no-repeat;background-attachment:relative; background-position:center bottom;
}
</style>
Customize Panel: Colors > Footer > Background > rgba(2,46,50,0.68)
Is there a mobile CSS value that I could use to get the image to fill up the entire footer widget area on mobile?
And would I put that inside the hook or in the CSS section in the customize panel?
@media (max-width: 768px) {} ???
Hi there,
have you tried add the Background Image directly to the Footer using the Backgrounds Module?
https://docs.generatepress.com/article/backgrounds-overview/
Hi David
Yes - I am familiar with the background images module in Customize, however if I use that feature to place the background image in the footer area then my background color overlay won't display.
If I follow your suggestion, do you have a way for the color overlay to display in front of the image as it appears wight now?
Hi,
Consider applying your CSS to this selector instead:
.site-footer {
background-image: url(http://courtenay.hostaccount200.info/wp-content/uploads/2020/11/la-skyline-1519x495-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}This shouldn't have any problems with your overlay color.
But with this CSS, you won't be able to keep the whole image width visible in mobile.
The background image's aspect ratio does not fit the mobile view at all, that's why you see weird spaces on the top (or bottom depending on bg position).
background-size: cover; is the most balanced compromise unless you want to re-size everything for mobile so all the contents fit in 1 row to make proper space ratio for the bg image.
