CSS Properties: How to set the a background-image as horizontal and vertical position in percentage of a document?
Solution:
HTML Code:
Explanation:
- This HTML document demonstrates how to set a background image to a specific position using percentage values.
- The CSS style block defines styling for an element with the id "xyz1".
- The background image used in this example is the w3resource logo.
- The background image is set not to repeat using background-repeat: no-repeat.
- The background position is set to 50% from the left and 50% from the top using background-position: 50% 50%.
- This effectively centers the background image both horizontally and vertically within the element.
- The HTML content within the div with id "xyz1" explains the concept of background-origin CSS property.
Live Demo:
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.