0

I have webpage with a background image:

    body {
        background-image    : url("https://example.com/image.png");
        background-size     : cover;
        background-repeat   : no-repeat;
    }

This works fine for 16:9 screen but for a mobile phone(9:16), the image covers (kind of) only half the screen!

How to specify different images based on aspect ratio?

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Finch
  • 205
  • 2
  • 10
  • You can use media queries that target specific aspect ratios. Here is the first stackoverflow answer I found when googling "aspect ratio media queries" https://stackoverflow.com/questions/34381089/exclusive-aspect-ratio-media-query – WizardCoder Oct 05 '17 at 19:48
  • See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio – Gabriele Petrioli Oct 05 '17 at 21:44
  • @GabyakaG.Petrioli that link helped. Thanks. – Finch Oct 08 '17 at 21:23

3 Answers3

0

You can try this. It may be problem with your image position

body{
  background: url(http://www.planwallpaper.com/static/images/nature-wallpapers-hd.jpg) no-repeat top center fixed; 
   -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

Show this, It may help you to understand background-size CSS background image to fit width, height should auto-scale in proportion

shafik
  • 6,098
  • 5
  • 32
  • 50
0

That will always happen as with background-size: cover the browser tries to fill the element with the same background. You can still do some adjustments with background-position, but it's not really helpful in these circumstances.

What could be much better is that you use media queries to use different backgrounds depending on the screen size.

Something like 

@media only screen and (max-width: 640px) {
  background: url(../images/mobile-background.jpg) no-repeat center center;
  background-size: cover;
}

@media only screen and (min-width: 641px) {
  background: url(../images/large-background.jpg) no-repeat center center;
  background-size: cover;
}

This way you can select specific images for both cases and some of the benefits include more adequate image size which leads to faster loads and less bandwidth consumption for the user. That also leads to better Page Speed results.

Mihail Minkov
  • 2,463
  • 2
  • 24
  • 41
0

This deals with aspect ratios in CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio. Thanks @GabyakaG.Petrioli

/*background image to load for 9:16 display*/
    @media (min-aspect-ratio: 9/16) {
        body {
            background-image    : url("https://example.com/image1.png");
        }
    }

/*background image to load for 16:9 display*/
    @media (min-aspect-ratio: 16/9) {
        body {
            background-image    : url("https://example.com/image2.png");
        }
    }

/*Common properties can go here*/
    body {

        background-size     : cover;
        background-repeat   : no-repeat;
    }
Finch
  • 205
  • 2
  • 10