Background image not scaling down in size for mobile

  • Author
    Posts
  • #99162

    I have set up the site the way I want it. But, the background image will not scale down when viewing on mobile. Specifically in vertical orientation. If I flip my phone horizontal, it displays fine. Is there a custom setting I need to change in order to get the image to scale down when phone is in a vertical orientation?

    The blog I need help with is blacklightcrush.com.

    #99366

    thelukemcdonald
    Theme Author

    It looks like the background image is resizing as intended on my devices. Background images can be tricky if you’re trying to get your focal point to work across all devices, orientations, and screen sizes.

    There’s no way for the browser to know the focal point of the image, so it repositions based on the center of the background image. When flipping your phone horizontally, that orientation better fits the image and it’s contents.

    If you do want to change the background image for a certain screen size, you could try using some custom CSS:

    @media (max-width: 400px) {
    	body.background-cover .obsidian-background-overlay {
    		background-image: url( http://example.com/image.jpg );
    	}
    }

    I hope that helps clarify some things.

The topic ‘Background image not scaling down in size for mobile’ is closed to new replies.