w3resource

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

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes No

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

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