Background image for mobile

Hi!

Is it possible to have a seperate background image for mobile and tablets? Or to have different image settings? In my case I have a landscape format image, and it works fine on computers, but it is zoomed in quite heavily on mobile. So, is it possible to define an “anchor” for what is to be upper left corner on mobile? Or, easier, to have another image, that’s in portrait format?

Hello there,

Did you mean row’s background or site’s body? Please share a link to your site here to help me inspect and see the possibility.

Regards,
Kharis

www.musikk-quiz.no is the site.

Second row shows only the background image (sites body), and I’d like to have the same thing for mobile, but in that case, the image lloks a bit weird. That’s why I’d either like to change image (and format) or to be able to do something about the settings for the current image…

Hello there,

Try adding this code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      body.custom-background {
        background-image: url('https://yoursite.com/path/to/other/image-background.jpg');
      }
    }

    @media only screen and (max-width: 600px) {
      body.custom-background {
        background-image: url('https://yoursite.com/path/to/other/image-background-2.jpg');
      }
    }

Regards,
Kharis

Are there any other parameters that can be adjusted? Like alignment, zoom-to-fit, etc? Can’t seem to get it to view properly…

Hello there,

Try this code:

    @media only screen and (max-width: 991px) {
      body.custom-background {
        background-image: url('https://yoursite.com/path/to/other/image-background.jpg');
        background-size: cover; 
        background-position: top center;
      }
    }

    @media only screen and (max-width: 600px) {
      body.custom-background {
        background-image: url('https://yoursite.com/path/to/other/image-background-2.jpg');
      }
    }

Regards,
Kharis