- This topic has 11 replies, 2 voices, and was last updated 4 years, 12 months ago by Leo.
-
AuthorPosts
-
May 17, 2019 at 9:24 am #902832Karel
Hello guys,
I’ve added this code and write “parallax” into elements classes
.parallax {
background-position: center bottom !important;
background-attachment: fixed;
}In a desktop version, it is working perfectly, the problem is with a mobile version because an image is ” pushed out ” when I add text.
Is there any solution how to make the header image static on the mobile version?
May 17, 2019 at 10:39 am #902929LeoStaffCustomer SupportHi there,
Not quite sure if I understand.
What do you mean that it’s pushed out?
Sometimes it’s much easier to have a specific background image for mobile:
@media (max-width: 768px) { .home .page-hero { background-image: linear-gradient(0deg, rgba(0,0,0,0.12),rgba(0,0,0,0.12)), url(https://MOBILE-BACKGROUND-IMAGE-HERE); } }
May 17, 2019 at 11:28 am #902980KarelBy “pushed out” I’ve meant that without any content a header image is okey, but when I publish anything the image is moving.
As you can see here:
May 17, 2019 at 12:35 pm #903044LeoStaffCustomer SupportJust checked on my phone and don’t think I’m seeing what you are seeing:
https://www.screencast.com/t/cseicZ5cJkHjHave you tried clear and disable the caching plugin?
https://www.screencast.com/t/cPh1dY1vcmmMay 17, 2019 at 1:59 pm #903111KarelYes I did, I added even more content now, and the header image has moved again.
I would like to have it as a static image.
without that code above it is looking like I want.
May 17, 2019 at 4:21 pm #903162LeoStaffCustomer SupportSorry I’m a little confused.
So you want your original code only apply to desktop?
If so you can wrap it in the media query:
https://docs.generatepress.com/article/responsive-display/May 18, 2019 at 5:27 am #903431KarelYes, but I cannot find the way how to do it.
May 18, 2019 at 9:09 am #903701LeoStaffCustomer SupportFind a way to do what?
If you want to use a fixed background image, shouldn’t the parallax be turned off?
May 18, 2019 at 10:09 am #903775KarelNo, I did not find a way.
I tried to use this code:
@media (max-width:768px) {
.fake-para {
background-position: center top !important;
background-size: contain;
}}and then played with padding for a mobile version, but a problem was that the image wasn’t always same sized. It didn’t look good.
If you want to use a fixed background image, shouldn’t the parallax be turned off?
Parallax feature is turned OFF in elements.
May 18, 2019 at 11:03 am #903815LeoStaffCustomer SupportSorry I’m really confused about what the problem is.
This is what I see on mobile and looks like everything is executed correctly as per your code:
https://www.screencast.com/t/xfhrLl5YdWMay 18, 2019 at 11:42 am #903846KarelI think I have just solved the problem now, it was kinda confusing because as we were writing I was still trying to play with code …
thank you anyway 🙂
May 18, 2019 at 11:50 am #903849LeoStaffCustomer SupportNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.