Responsive background Images Infinity Pro

[immacc50]

I recently switched to Infinity Pro from Parallax Pro for my business website. I am trying to get the front page background images (front page 1, 3, 5) to scale correctly for mobile devices.

Of special concern is front page 1 background image of my family... image does not scale completely resulting in cutting off 2 family members which is bad for branding.

Sidenote: My device is Samsung S7. Image is slightly better on iPhone 8, but still cutting off image substantially.

Any tips or tricks would be appreciated.

https://clovisplumbingservices.com/

[askdesign]

You'll need to add some media queries (mobile-responsive code).

ORIGINAL CODE

@media only screen and (max-width: 800px) {
.front-page-1 {
    height: auto;
}

@media only screen and (max-width: 800px)
.front-page-1, .front-page-2, .front-page-3, .front-page-4, .front-page-5, .front-page-6, .front-page-7 {
    padding-bottom: 150px;
    padding-top: 150px;
}

}

MODIFIED CODE

@media only screen and (max-width: 800px) {
.front-page-1, .front-page-3, .front-page-5 {
    padding-bottom: 150px;
    padding-top: 150px;
    background-size: contain;
}
}

---

Anne S. Katzeff
Designer | Artist | Teacher

[Author]

Posts