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

    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!!

    • This topic was modified 3 years, 5 months ago by Jesse Owens. Reason: remove large images
    #23957
    BoldGrid Support
    Keymaster

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

    #28237
    DG
    Guest

    Hi!

    I am facing the exact same issue. The background images on my website are just too zoomed in to be able to tell they are even actual images. Especially in my SHOP THE FIT page. However, when I try editing this in the CSS editor, the mobile preview looks just fine but that is not how it actually appears on a mobile device.

    I tried adding the media tag as suggested in your response but it did not work and would really like some assistance on this.

    Cheers

    #28266
    Jesse Owens
    Keymaster

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Resize Background image for Mobile Phones’ is closed to new replies.