Resize Background image for Mobile Phones | BoldGrid

Support Home Forums Questions Resize Background image for Mobile Phones

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23956 Reply

    My website has an image as it’s background. On a desktop, the image shows up great, however, on a mobile phone, the image is so close-up that you can’t really even tell it is an image (it just looks white because of the clouds). It is set to be a fixed image, and to cover the page. In the boldgrid mobile preview it looks good. Can you help me? What should I do to fix this? I am attaching some images so you can see what I am talking about. Thanks!!

    #23957 Reply

    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%;
    }
    }

Viewing 2 posts - 1 through 2 (of 2 total)
Reply To: Resize Background image for Mobile Phones
Your information: