How to scale color section background image to fit on mobile - Support

Tagged: 100%, background image, color section, horizontal, parallax, responsive, scale

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 16, 2016 at 4:17 pm #661653

mofix
Participant

Hi,

I am very pleased with the parallax effect on desktop with stretched background images in color section.

But on mobile it’s not fitting to the screen, and the images get very long and cut of.
I have tried to put this: .avia-section { background-size: 100% 100% !important; }
and this: .avia-section { background-size: cover !important; }
for mobile but I don’t get it to work.

Can I get the image background scale 100% width on mobile some how? That they are horizontal like the “meny(u)” images that scale very well on mobile.

Kindly regards, Mathilde

July 18, 2016 at 10:11 pm #662283

ewingmh
Participant

I need the answer to this as well… Following.

July 20, 2016 at 1:54 pm #662953
Andy
Inactive Moderator
Hi,

for example use this code:
```
#av_section_3 {
background-size: 209% 91% !important;
background-position: 53% 90% !important;
}
```
Adjust as needed and use this for your other av_sections as well.

Best regards,
Andy
July 22, 2016 at 2:34 pm #663877

mofix
Participant

Hi Andy, Thanks a lot! Now I managed to adjust it well to how I wanted it:

And: ewingmh , here’s the code I used in custom css.

@media only screen and (max-width: 489px) {
#av_section_1 {
background-size: 100% 45% !important;
background-position: 40% 90% !important;
margin-top: -100px;
}
}

Kindly regards,
Mathilde

You can close this now. Thanks!

July 23, 2016 at 1:11 pm #664177

Rikard
Keymaster

Hi Mathilde,

Great, glad you got it working and thanks for sharing your solution :-)

Regards,
Rikard
Author

Posts