CSS Properties: How to set the position of a background-image?

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

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>How to set the position of a background-imaget</title>
<style type="text/css">/* CSS style start*/
#xyz1 {
border: 8px solid blue; /* 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/w3resource-logo.png); /* Set background image for div with id "xyz1" */
background-repeat: no-repeat; /* Set background image to not repeat */
background-position: center; /* Set the position of the background image to center */
}
</style>
<body>
<p>No background-origin (padding-box is default):</p><!-- Display a paragraph -->
<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-position property is set to center to position the background image at the center of the div.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page