Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output – 



Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads