CSS3 introduces some new background properties that offer greater control over the backgrounds of elements, including background-size, background-origin, and background-clip. These properties improve the flexibility of CSS backgrounds beyond what was possible in earlier versions.
CSS3 background properties provide powerful tools for controlling the appearance of elements without relying on images. They improve design flexibility and can contribute to faster loading times by reducing the need for image assets.
background-size
The background-size property allows you to scale the size of background images. This is a new feature in CSS3.
Syntax: E { background-size: value; }
The value can be one or two lengths or percentages, or one of the following keywords:
length
It explicitly sets the width and height of the background image using units such as px, em, or rem. If only one value is provided, it sets the width, and the height is set to auto to maintain the aspect ratio. If two values are provided, the first sets the width and the second sets the height.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.aa {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/04/visual-selection-1-2.png");
width:550px;
height:400px;
background-size:80px 60px;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="aa1">vbmnvmbvmbm,b ,v,mb,mn</div>
<div class="aa2">vbmnvmbvmbm,b ,v,mb,mn</div>
</body>
</html>percentage:
The background image’s width and height are set as a percentage of the background positioning area. Similar to length values, one percentage sets the width with autoheight, and two percentages set both the width and height.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.aa {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/04/visual-selection-1-2.png");
width:550px;
height:400px;
background-size:60% 40%;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="aa1">vbmnvmbvmbm,b ,v,mb,mn</div>
<div class="aa2">vbmnvmbvmbm,b ,v,mb,mn</div>
</body>
</html>cover
The system scales the background image to its maximum size, ensuring it completely covers the background positioning area. The system may clip some parts of the image to align with the element’s aspect ratio.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.aa {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/04/visual-selection-1-2.png");
width:550px;
height:400px;
background-size:cover;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="aa1">vbmnvmbvmbm,b ,v,mb,mn</div>
<div class="aa2">vbmnvmbvmbm,b ,v,mb,mn</div>
</body>
</html>contain
The function scales the background image to fit within the background positioning area while maintaining its aspect ratio. This function ensures the entire image is visible, but it might result in empty areas around the image if the aspect ratio of the image doesn’t match the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.aa {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/04/visual-selection-1-2.png");
width:550px;
height:400px;
background-size:contain;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="aa1">vbmnvmbvmbm,b ,v,mb,mn</div>
<div class="aa2">vbmnvmbvmbm,b ,v,mb,mn</div>
</body>
</html>background-origin
The background-origin property specifies where the background image is positioned from. In CSS2, we calculated the background positions based on the padding’s outer limits. Background Origin allows you to change this. Keep in mind that setting background-attachment to fixed has no effect on this property.
Syntax: E { background-origin: keyword; }
padding-box
The background image is positioned relative to the padding box (the area enclosed by the padding edges). This is the default value.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.aa1 {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/06/Swarm-Blockchain.jpg");
border: 10px dashed skyblue;
background-position: 40% 10%;
background-origin: padding-box;
}
</style>
</head>
<body>
<div class="aa"></div><br>
<div class="aa1">vbmnvmbvmbm,b ,v,mb,mn</div><br>
<div class="aa2">vbmnvmbvmbm,b ,v,mb,mn</div>
</body>
</html>border-box:
The background image is positioned relative to the border box (the area enclosed by the border edges).
Example
.aa {
background: url("https://onlinetutorialhub.com/wp-content/uploads/2025/06/Swarm-Blockchain.jpg");
padding:20px;
border: 10px dashed black;
background-position: 40% 10%;
background-origin: border-box;
}
content-box:
The background image is positioned relative to the content box (the area enclosed by the content edges).
Example
.aa2 {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/06/Swarm-Blockchain.jpg");
border: 10px dashed yellow;
background-position: 40% 10%;
background-origin: content-box;
}background-clip
The background-clip property specifies the painting area of the background. It determines whether the background (color or image) extends into the border, padding, or content area.
Syntax: E { background-clip: keyword; }
The keyword can be one of the following values:
border-box
The background extends to the outside edge of the element’s border. This is the default value.
Example
.aa {
background: url("https://onlinetutorialhub.com/wp-content/uploads/2025/06/Swarm-Blockchain.jpg");
padding:20px;
border: 10px dashed black;
background-position: 40% 10%;
background-clip: border-box;
}padding-box:
The background is clipped to the outside edge of the element’s padding and does not extend into the border.
Example
.aa2 {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/06/Swarm-Blockchain.jpg");
border: 10px dashed yellow;
background-position: 40% 10%;
background-clip: padding-box;
}content-box:
The background is clipped to the edge of the content box.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.aa1 {
background-image: url("https://onlinetutorialhub.com/wp-content/uploads/2025/06/Swarm-Blockchain.jpg");
border: 10px dashed skyblue;
background-position: 40% 10%;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="aa"></div><br>
<div class="aa1">vbmnvmbvmbm,b ,v,mb,mn</div><br>
<div class="aa2">vbmnvmbvmbm,b ,v,mb,mn</div>
</body>
</html>text:
This is a non-standard value (with the -webkit- prefix) that clips the background to the foreground text of the element, making the background visible only behind the letters.
Example
.example-text-clip {
font-size: 4em;
color: white;
background-image: url('pattern.png');
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}CSS3 Topics