Resize Background image for Mobile Phones

Hey there mbrooks!
Thanks for getting in touch with us in regard to your background image sizing.  Sizing background images for just the right display between devices can be sorta tricky.  iOS devices have had issues with background-size: cover and using fixed positioning for the scroll attachment when using Safari.

This does require a little bit of trial and error to get it looking just the way you want depending on your image and the dimensions it has, but the first thing I would try is adding this CSS in the CSS editor:

body.palette-primary.custom-background {
background-position: center center;
}

This should position the background image in the center instead of the current top left you’re seeing.  For most cases, this usually gets the desired look.  You might want to check the image you’re using as well, maybe it’s very large and could be scaled down or resized some to make this display better on mobile.

You can try scaling the background image to the size desired by changing the background-size property as well with this CSS:

body.palette-primary.custom-background {
background-size: auto 100%;
}

If you only want the image to be scaled in mobile and are happy with the desktop display, then you would use a media query to achieve that:

@media only screen and (max-width : 768px) {
body.palette-primary.custom-background {
background-size: auto 100%;
}
}

Hi DG-

The code here is specifically meant for the body background image, not backgrounds in your individual blocks. Check out the response I sent to your other topic and let us know there if that works for you.