- This topic has 11 replies, 4 voices, and was last updated 6 years, 4 months ago by
.
-
Posts
-
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
Customer Support
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 🙁
Customer Support
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 🙂
- You must be logged in to reply to this topic.
