To make background image scale on mobile, add this to your media query:
background: url('http://something.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;Using min-width
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }
Devices
Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones. I hope it’s not a big deal for you.
| Device Category | Breakpoint Width | Device Name |
|---|---|---|
| Mobile, portrait | 320px | iPhone SE |
375px | iPhone 6 to X | |
414px | iPhone 8 Plus | |
| Mobile, landscape | 568px | iPhone SE |
667px | iPhone 6 to 8 | |
736px | iPhone 8 Plus | |
812px | iPhone X | |
| Tablet, portrait | 768px | iPad Air, iPad Mini, iPad Pro 9″ |
834px | iPad Pro 10″ | |
| Tablet, landscape | 1024px | iPad Air, iPad Mini, iPad Pro 9″ |
1024px | iPad Pro 12″ (portrait) | |
1112px | iPad Pro 10″ | |
| Laptop displays | 1366px | HD laptops (768p) |
1366px | iPad Pro 12″ (landscape) | |
1440px | 13″ MacBook Pro (2x scaling) | |
| Desktop displays | 1680px | 13″ MacBook Pro (1.5x scaling) |
1920px | 1080p displays |
Background CSS Values:
| auto | Default value. The background image is displayed in its original size |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”. Read about length units |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto” |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges |
| contain | Resize the background image to make sure the image is fully visible |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
