CSS Properties: How to set the position of a background-image?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.