Why this simple css queries does not change background color

I want to test the css queries (min-width & max-width) and I wrote this:

<html>
<head>
<style>
body{
    background-color:red;
}
@media only screen and (max-width: 600px){
    body{
        backgroud-color:#F00;
    }
}

@media only screen and (max-width: 900px) and (min-width: 600px){
    body{
        backgroud-color:#FF0;
    }
}

@media only screen and (min-width: 900px){
    body{
        backgroud-color:#0F0;
    }
}
</style>
</head>
<body>
</body>
</html>

So it should be shown like this.

But it does not change the background at all!

What is it that is wrong with this code that does not change the background color when it comes to certain pixels, while I had defined the related conditions?

I appreciate any idea about this…

>Solution :

Because you are using backgroud-color instead of background-color that is missing n.
try this code and it should work fine:


<html>
<head>
    <style>
        body{
            background-color:red;
        }
        @media only screen and (max-width: 600px){
            body{
                background-color:#F00;
            }
        }

        @media only screen and (max-width: 900px) and (min-width: 600px){
            body{
                background-color:#FF0;
            }
        }

        @media only screen and (min-width: 900px){
            body{
                background-color:#0F0;
            }
        }
    </style>
</head>
<body>
</body>
</html>

Leave a Reply