Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 22 Apr, 2021

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 satisfying 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:

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 – 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!