background-image: always cover whole page

Question

What i want to achieve:

If the site has a widescreen aspect ratio, the background-image should scale to 100% horizontally, which crops the top and bottom part. I can achieve that easily by using background-size: cover;

But if the site has a vertical aspect ratio (eg smartphone), the image repeats vertically. What I actually want is, that the image now scales to 100% vertically, which would crop the left and right part.

How can I achieve both at the same time (just using css)?

Answer 1

You could probably accomplish what you need using media queries, use this in your main css. The media query allows you to change your class attributes depending on the size of the display.

body {
    background-size: cover;
    background-repeat: no-repeat;
}

/* ----------- iPhone 6 ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
   body {
    background-repeat: repeat-y;
   }
}

you can learn more about media queries here .