RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/background-clip-answer.php below:

Website Navigation

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

CSS Properties: How to specify the painting area of the background?Last update on February 16 2024 13:18:03 (UTC/GMT +8 hours)

Go to Exercise page

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:

padding-box clips the background to the area within the padding of the div.
content-box clips the background to the area within the content box of the div.

The content within each div consists of an <h2> heading and a paragraph (<p>).

Live Demo:

See the Pen background-clip-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4