Loading Please Wait...
CSS background-position property is used set the position of background images and is relative with respect to the position set by background-origin property.
The background-position property can have following values:
top: background image is position to top.
left: background image is position to left.
right: background image is position to right.
bottom: background image is position to bottom.
center: background image is position to center.
percentage: background image is position to the percentage value give.
length: background image is position to the length value given.
inherit: inherit from parent.
initial: initial as browser default.
revert: same as it would be if no changes were made.
revert-layer: same as back to the previous value.
unset: same as parent (like inherit) and if not inherited then back to browser default (like initial).
background-position: top;
background-position: top bottom;
background-position: top bottom 25%;
background-position: top bottom left right;
| 1-Value | 2-Value | 3-Value | 4-Value |
|---|---|---|---|
| top | top 50% | top 50% 50% | top 50% 50% 50% |
| bottom | bottom 50% | bottom 50% 50% | bottom 50% 50% 50% |
| left | left 50% | left 50% 50% | left 50% 50% 50% |
| right | right 50% | right 50% 50% | right 50% 50% 50% |
| - | top bottom | top bottom 50% | top bottom 50% 50% |
| - | top left | top left 50% | top left 50% 50% |
| - | - | top left 10px | top left 10px 50% |
| - | - | - | top left 10px 1em |
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* Percentage values */
background-position: 25% 75%;
/* Length values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* Edge Offset */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
/* Global keyword value */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;
We can also define multiple background position with multiple background images.
background-image: url("image1.png"), url("image2.png");
background-position: top, top right;
CSS background-position-x property is used set the horizontal position of background images and is relative with respect to the position set by background-origin property.
background-position-x: top;
background-position-x: top, top right;
background-position-x: 20%, 1rem;
CSS background-position-y property is used set the vertical position of background images and is relative with respect to the position set by background-origin property.
background-position-y: top;
background-position-y: top, top right;
background-position-y: 20%, 1rem;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved