CODEWITHSUNDEEP
htmlcss
Jonatan
Jonatan

Reputation: 110

background-image: always cover whole page

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 (e.g. 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)?

Upvotes: 2

Views: 58

Answers (1)

Dan Beaulieu
Dan Beaulieu

Reputation: 19994

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.

Upvotes: 2

Related Questions