How to change background-color on a specific wider viewport in CSS ?

Last Updated : 15 May, 2023

The purpose of this article is to change the background-color on a specific wider viewport in CSS. In simple words specify some width and if the width satisfies the condition then it does not change its view but if the with not satisfy the condition then it is going to change its view.

Media rule: This rule is used in media queries to apply different styles for different media types/devices.

Syntax :

@media not|only mediatype and (mediafeature) {
      Some CSS-Code;
}

Where:

not – This keyword inverts the meaning of an entire media query.
only – This keyword prevents older browsers that do not support media queries with media features from applying the specified styles.
and – This keyword combines a media feature with a media type or other media features.

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
 
    <style>
        body {
            background-color: lightgreen;
            font-size: 30px;
        }
 
        @media only screen and (max-width: 800px) {
            body {
                background-color: lightgrey;
            }
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
 
    <p>
        Resize the browser window. When
        the width of this document is
        800 pixels or less, the
        background-color is "lightgrey",
        otherwise it is "lightgreen".
    </p>
</body>
</html>