CSS Properties: How to specify the painting area of the background?

Last update on February 16 2024 13:18:57 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Set the character encoding of the HTML document -->
<title>How to specify the painting area of the background</title><!-- Set the title of the HTML document -->
<style> /* CSS style start*/
#xyz1 {
border: 5px #0033FF; /* Set border properties for the first div */
border-style: dotted double; /* Specify the border style */
margin: 2em; /* Set margin for the first div */
padding: 2em; /* Set padding for the first div */
background: #3399CC; /* Set background color for the first div */
background-clip: padding-box; /* Specify the painting area of the background to be inside the padding */
}

#xyz2 {
border: 5px #0033FF; /* Set border properties for the second div */
border-style: dotted double; /* Specify the border style */
margin: 2em; /* Set margin for the second div */
padding: 2em; /* Set padding for the second div */
background: #3399CC; /* Set background color for the second div */
}

#xyz3 {
border: 5px #0033FF; /* Set border properties for the third div */
border-style: dotted double; /* Specify the border style */
margin: 2em; /* Set margin for the third div */
padding: 2em; /* Set padding for the third div */
background: #3399CC; /* Set background color for the third div */
background-clip: content-box; /* Specify the painting area of the background to be inside the content box */
}
</style>
</head>
<body>
<div id="xyz1"><!-- First div with specified styling -->
<h2>w3resource</h2>
<p>Free web development tutorial.</p>
</div>
<div id="xyz2"><!-- Second div with similar styling as the first div -->
<h2>w3resource</h2>
<p>Free web development tutorial.</p>
</div>
<div id="xyz3"><!-- Third div with a different background-clip value -->
<h2>w3resource</h2>
<p>Free web development tutorial.</p>
</div>
</body>
</html>

Explanation:

The HTML document contains three div elements with different styles applied.
Each div has its own unique ID (xyz1, xyz2, xyz3).
CSS styles are applied to these divs to specify their appearance, including borders, margins, padding, and background color.
The background-clip property determines the painting area of the background within each div: