Archived topic
Element background image - mobile
11 replies · Started by Michael on November 12, 2018
Looking for a fix for my issue I found this thread https://generatepress.com/forums/topic/different-page-hero-element-image-on-mobile/
I am using the same code
@media (max-width: 768px) {
.page-hero.my-page-hero {
background-image: url(http://MOBILE-IMAGE-URL)
}
}My issue is that the Background Overlay is lost on the mobile image. The default has a Background Overlay checked and color set but this won't show over the mobile specific image.
Is there a way to use the same color overlay?
Resolved: Just needed to include the linear-gradient in front of the image url.
Glad you figured out :)
Hi,
Could not find the place to customize the 2 linear points of the gradient overlay.
Am I missing something?
The css does create a linear gradient but I don't see any place in the element's UI to set these 2 points.
I would like to set the first stop to 0.95 alpha.
.page-hero {
background-color: rgba(9,9,9,0.66);
background-image: url(http://localhost/lamotors/wp-content/uploads/2018/08/goh-rhy-yan-377769-unsplash-Large.jpg);
background-size: cover;
background-image: linear-gradient(0deg, rgba(9,9,9,0.66),rgba(9,9,9,0.66)), url(http://localhost/lamotors/wp-content/uploads/2018/08/goh-rhy-yan-377769-unsplash-Large.jpg);
background-repeat: no-repeat;
color: #ffffff;
padding-top: 15%;
padding-right: 20px;
padding-bottom: 15%;
padding-left: 20px;
text-align: center;
box-sizing: border-box;
}
Thanks,
Dan
Hi there,
the background color overlay doesn't provide gradient options. Just the flat color. The linear-gradient property is required to allow the image and the color to be rendered together nothing more.
If you want a bespoke overlay then this will take some CSS. Here's one i made earlier:
/* GP Page Hero - Gradient Overlay */
.gradient-overlay {
position: relative;
z-index: -1;
}
.gradient-overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(rgba(3, 89, 155, .5), rgba(14, 161, 234, .6));
z-index: -1;
}Give the page hero an Element class of .gradient-overlay and adjust the CSS accordingly.
Thanks David,
I would suggest adding in the Element's UI another color box for setting the gradient stops.
See attached mockup:
https://www.dropbox.com/s/q3yfrp8ku7a4h64/gp-bg-gradient.jpg?dl=0
Dan
The: z-index:-1 on the .gradient-overlay div and the :after caused links and buttons in the hero are to be unclickable. So I removed the z-index, and added it to the inner div with a positive number.
.inside-page-hero {z-index: 100; position: relative;}
Glad you got it resolved. I'll pass on the suggestion.
Thanks
You're welcome
Like stated above, even though the color picker / interface only allows us to choose a single color, the CSS renders it as a gradient. This seems like such a wasted opportunity.
Give the page hero an Element class of .gradient-overlay and adjust the CSS accordingly.
I'm unclear where to add that css class in Header Element editor.
------------------
Editing to add that I figured out where to add the custom CSS class and it works great. Thanks.
Glad you figured out :)
