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
Achieve Responsiveness for background image with CSS
Creating responsive background images ensures that your images adapt properly to different screen sizes and device orientations. The key is using CSS properties like background-size and proper viewport settings to make images scale appropriately.
Syntax
selector {
background-image: url('image-path');
background-size: value;
background-repeat: no-repeat;
background-position: center;
}
Key Properties for Responsive Background Images
| Property | Values | Description |
|---|---|---|
background-size |
contain, cover, 100% | Controls how the background image is sized |
background-repeat |
no-repeat, repeat | Prevents image repetition |
background-position |
center, top, bottom | Controls image positioning |
Method 1: Using background-size: contain
The contain value scales the image to fit completely within the container while maintaining aspect ratio −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container-contain {
width: 100%;
height: 300px;
border: 2px dashed blue;
background-image: url('/python/images/python-data-science.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
</head>
<body>
<p>Resize the browser to see the responsive effect with contain:</p>
<div class="container-contain"></div>
</body>
</html>
A container with a dashed blue border displays a background image that scales to fit completely within the container while maintaining its aspect ratio. The image may leave empty space on the sides or top/bottom.
Method 2: Using background-size: cover
The cover value scales the image to cover the entire container, which may crop parts of the image −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container-cover {
width: 100%;
height: 300px;
border: 2px solid green;
background-image: url('/python/images/python-data-science.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<p>Resize the browser to see the responsive effect with cover:</p>
<div class="container-cover"></div>
</body>
</html>
A container with a solid green border displays a background image that covers the entire container area. The image maintains its aspect ratio but may be cropped to fill the space completely.
Method 3: Using background-size: 100%
Using percentage values allows you to control both width and height scaling independently −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container-percent {
width: 100%;
height: 250px;
border: 2px dotted red;
background-image: url('/python/images/python-data-science.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
</style>
</head>
<body>
<p>Image stretches to fill container dimensions exactly:</p>
<div class="container-percent"></div>
</body>
</html>
A container with a dotted red border displays a background image that stretches to fill the exact width and height of the container, potentially distorting the image's aspect ratio.
Conclusion
Use background-size: contain to keep the entire image visible, cover to fill the container without distortion, or percentage values for custom scaling. Always include the viewport meta tag for proper mobile responsiveness.
238 Views
