Starting position of a background image.
Syntax
background-position: HorizontalPosition VerticalPosition ;
background-position: inherit ;
HorizontalPosition - A value in pixels, % or ems or left, right or center.
VerticalPosition - A value in pixels, % or ems or top, bottom or center.
inherit - inherit from a parent element.
0% is the same as left or top
100% is the same as right or bottom.
New in CSS3 is the ability to specify multiple background images. Specify the positions for multiple images as a comma-separated list, these positions will then be applied (in order) to each of the images specified by background-image.
Examples:
h1 { background-position: 25px 100px; }
.emw3class { background-position: left top; }
#emw3id {
background-image: url('../images/grad.png');
background-repeat: no-repeat;
background-position: top right;
}
Try it:
This is a sample of text with a CSS background image. New in CSS3 is the ability to specify multiple background images. Specify multiple images as a comma-separated list. |
(CSS 1) Browser Support: All major browsers.
“Social progress can be measured by the social position of the female sex” ~ Karl Marx
Related:
Background-position - MDN Web Docs.
Background-Attachment - Position of a background image relative to the page.
Background-Color - The background color of an element.
Background-Image - The background image for an element.
Background-Repeat - How a background image will be repeated.
background - A shorthand for the background properties.