Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change background-color on a specific wider viewport in CSS ?
The method through which we can determine the device being used for surfing is by using what we call, "viewport" widths. CSS media queries allow you to change background colors and other styles based on specific viewport widths, making your website responsive across different devices.
Syntax
@media screen and (min-width: value) {
selector {
background-color: color;
}
}
Understanding Viewports
In web development, a viewport is the visible area of a web page on a device. There are two main types
The layout viewport is the fixed area onto which the browser draws the web page
The visual viewport is the portion currently visible to the user
To ensure proper responsive behavior, you must include the viewport meta tag in your HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport Setup</title>
</head>
<body>
<p>This page will scale properly on different devices.</p>
</body>
</html>
Media Query Basics
Media queries use logical operators to create conditions based on device characteristics. The main operators are
and Combines multiple conditions
or Matches any of the conditions
not Inverts the condition
Example: Basic Background Color Change
The following example changes the background color when the viewport width is 750px or smaller
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
padding: 20px;
font-size: 18px;
margin: 0;
}
@media screen and (max-width: 750px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h1>Responsive Background Color</h1>
<p>Resize your browser window to see the background color change at 750px width.</p>
</body>
</html>
The page displays with a light green background. When the browser width is reduced to 750px or less, the background changes to light blue.
Example: Multiple Viewport Breakpoints
You can create multiple breakpoints for different device sizes
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f0f0f0;
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s ease;
}
/* Tablet styles */
@media screen and (max-width: 1024px) {
body {
background-color: #e6f3ff;
}
}
/* Mobile styles */
@media screen and (max-width: 768px) {
body {
background-color: #ffe6e6;
}
}
/* Small mobile styles */
@media screen and (max-width: 480px) {
body {
background-color: #e6ffe6;
}
}
</style>
</head>
<body>
<h1>Multi-Breakpoint Background</h1>
<p>This page shows different background colors for various screen sizes:</p>
<ul>
<li>Desktop: Light gray</li>
<li>Tablet (1024px): Light blue</li>
<li>Mobile (768px): Light pink</li>
<li>Small Mobile (480px): Light green</li>
</ul>
</body>
</html>
The page displays with different background colors as you resize the browser: light gray for desktop, light blue for tablet sizes, light pink for mobile, and light green for small mobile screens.
Conclusion
CSS media queries provide a powerful way to change background colors based on viewport width. By combining different breakpoints and conditions, you can create responsive designs that adapt beautifully to any device size.
1K+ Views
