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
How to set the painting area of the background with JavaScript?
In this tutorial, we will learn how to set the painting area of the background with JavaScript using the backgroundClip property.
The background-clip CSS property defines how far a background (color or image) extends within an element. It specifies whether the background extends beneath the border-box, padding-box, or content-box of an element.
Understanding background-clip Property
The background-clip property accepts three main values:
- border-box - Background extends to the outer edge of the border (default)
- padding-box - Background extends to the outer edge of the padding
- content-box - Background is clipped to the content box
Setting backgroundClip to 'content-box'
The content-box value clips the background to the content area only, excluding padding and border areas.
Syntax
document.getElementById("elementId").style.backgroundClip = "content-box";
Example
This example demonstrates changing the background clipping area from border-box to content-box when the button is clicked:
<html>
<head>
<style>
#box {
border: 3px dashed red;
padding: 40px;
width: 500px;
height: 100px;
background-color: yellow;
background-clip: border-box;
}
</style>
</head>
<body>
<h3>Setting backgroundClip to 'content-box'</h3>
<button onclick="setContentBox()">Set to Content Box</button>
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<script>
function setContentBox() {
document.getElementById("box").style.backgroundClip = "content-box";
}
</script>
</body>
</html>
Setting backgroundClip to 'padding-box'
The padding-box value clips the background at the outer edge of the padding, excluding the border area but including the padding area.
Syntax
document.getElementById("elementId").style.backgroundClip = "padding-box";
Example
This example shows how to change the background clipping from content-box to padding-box:
<html>
<head>
<style>
#box2 {
border: 3px dashed red;
padding: 40px;
width: 500px;
height: 100px;
background-color: lightblue;
background-clip: content-box;
}
</style>
</head>
<body>
<h3>Setting backgroundClip to 'padding-box'</h3>
<button onclick="setPaddingBox()">Set to Padding Box</button>
<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<script>
function setPaddingBox() {
document.getElementById("box2").style.backgroundClip = "padding-box";
}
</script>
</body>
</html>
Comparison of backgroundClip Values
| Value | Background Extends To | Includes Border | Includes Padding |
|---|---|---|---|
| border-box | Border edge | Yes | Yes |
| padding-box | Padding edge | No | Yes |
| content-box | Content edge | No | No |
Conclusion
The backgroundClip property in JavaScript allows you to dynamically control how far a background extends within an element. Use content-box for backgrounds limited to content area, padding-box to include padding, and border-box (default) to extend to borders.
374 Views
