0

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

All rights reserved CNFdesigns.