CSS Properties: How to sets this property to its default value?

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

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>How to sets this property to its default value</title>
<style type="text/css">/* CSS style start*/
#xyz1 {
border: 8px dashed #3300CC; /* Set border properties for div with id "xyz1" */
padding: 40px; /* Set padding properties for div with id "xyz1" */
background: url(https://www.w3resource.com/images/w3resourcelogo.gif); /* Set background image for div with id "xyz1" */
background-origin:initial; /* Set the origin of the background image to its initial value */
background-repeat: no-repeat; /* Set background image to not repeat */
}
</style>
</head>
<body>
<div id="xyz1"><!-- Display a div with id "xyz1" -->
<h2>Background image origin</h2><!-- Display a heading -->
<p>The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.</p><!-- Display a paragraph -->
</div>
</body>
</html>

Explanation:

A div element with the ID xyz1 is defined.
The div has a border, padding, and a background image.
The background-origin property is set to initial to revert it to its default value.
The background image origin will be set to its default value, which is typically padding-box.

Live Demo:

See the Pen background-image-origin-initial-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page