Archived topic
Image size page hero
11 replies · Started by antoine on June 26, 2019
Hy,
Il would like to set a specific size for the background image in page hero header and Keep bacground color full width.
So the image overlap the bacground but not cover full width too.
Is there a way to adjust backgroud image size?
Thank you,
Antoine
Hi there,
if i understand correctly, then add your featured image to the header element, set the background position to center center. Add your background color - but do not select background color as overlay. Then add this CSS:
.page-hero {
background-size: contain;
}Hello David,
Thank you. I have just change contain by initial. It works fine.
Great support!
Glad to be of help.
Hi David, did the same thing and worked great to have a full size image on page hero, but doesn't work on mobile :(
Any chance you can link us to the page in question?
Feel free to start a new topic so you can use the private URL field.
Let me know :)
What is the effect you'd like to achieve?
What if we use a specific background image just for mobile?
SURE, how can I use a specific image only for mobile?
Hi there,
the Site you imported has some CSS for positioning the background image which needs to be removed. In Customizer > Additional CSS remove this:
/* ------
Page Header
------- */
.page-hero {
height: 100vh;
background-size: 70vh;
background-position: 90%;
}
.inside-page-hero {
margin-left: 40px;
margin-right: 50%;
}
@media (max-width: 419px ){
.page-hero {
min-height: 568px;
background-position: 42vw !important;
}
.inside-page-hero {
margin-left: 20px !important;
margin-right: 20% !important;
}
}
@media (min-width: 420px) and (max-width: 768px) {
.page-hero {
background-position: 60vw !important;
background-size: 60vh !important;
}
.inside-page-hero {
margin-right: 40% !important;
}
}Thanks!!! It work!!!
Glad to be of help :)
