CODEWITHSUNDEEP
cssmedia
voxie
voxie

Reputation: 21

Background doesn't change using media query on smaller devices

Here's the style.css where I've implement media queries:

body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
    }

/* Large desktop */
@media (min-width: 1200px)
    body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
    }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) 
    body {
        background: #b5ebf9 !important;
    }
/* Landscape phone to portrait tablet */
@media (max-width: 767px)
    body {
        background: #b5ebf9 !important;
    } 
/* Landscape phones and down */
@media (max-width: 480px)
    body {
        background: #b5ebf9 !important;
    }

And I've added this in the HTML, for it to detect (I think this is right):

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

And obviously, linked to the above CSS file in the header.

But for some reason, the background image ALWAYS displays, instead of the colour #b5ebf9.

What am I doing wrong?! I've spent 1-2 days on and off trying to fix this! I tried...

Please help!

Upvotes: 2

Views: 3544

Answers (2)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

You need those {} to regroup media queries:

body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
}

/* Large desktop */
@media (min-width: 1200px){
    body {
        background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
        background-repeat: no-repeat;
        background-position:bottom left, bottom right;
    }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    body {
        background: #b5ebf9 !important;
    }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px){
    body {
        background: #b5ebf9 !important;
    } 
}
/* Landscape phones and down */
@media (max-width: 480px){
    body {
        background: #b5ebf9 !important;
    }
}

Upvotes: 4

Ani
Ani

Reputation: 4523

Can you try this: @media only screen and (max-width: 979px) and (min-width:768px) {} @media only screen and (max-width: 767px) and (min-width:481px) {}

instead of just @meadia

Upvotes: 0

Related Questions