Smallest background doesn't show

Question

I am trying to make a mobile friendly website with a responsive background. To do this I have made 4 different sizes of the same background: 360px wide, 600px wide, 1000px wide and 1500px wide. I use media queries to depent whichs background to display.

/*------------- Styles for different screen sizes -------------
/* For width smaller than 400px: */
body    {
    background-image: url('../data/background/360.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

/* For width bigger than 600px: */
@media only screen and (min-width: 600px){
    body    {
        background-image: url('../data/background/600.png');
       
    }
}

/* For width bigger than 1000px: */
@media only screen and (min-width: 1000px){
    body    {
        background-image: url('../data/background/1000.png');
       
    }
}
/* For width bigger than 1500px: */
@media only screen and (min-width: 1500px){
    body    {
        background-image: url('../data/background/1920.png');
       
    }
}
/*-------------------------------------------------------------*/

however, the smallest background (360.png) doesn't show up when the screen is smaller than 600 pixels. All other backgrounds do show up when I resize the screen. What's the problem here? The url is correct.

Answer 1

the css code is fully working. have you put the meta tag in head section

try using this it will work.

 <meta name="viewport" content="width=device-width, initial-scale=1">

put this in head section.