background-position
JavaScript syntax:
backgroundPosition
Values:
[
[<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | bottom]] |
[[left | center | right] || [top | center | bottom]
]
| inherit
Initial value:
0% 0%
Applies to:
Block-level and replaced elements.
Inherited:
No.
Description:
background-position property sets the position of the background's origin image. When percentage or length values are used, the first is the horizontal, and the second the vertical.
If only one value is used, it sets the horizontal, the missing value is default to be either center or 50%. Negative values are permitted, and may place the origin image outside the element's content area.
Examples:
<html>
<head>
</head>
<body>
<div
style="background: blue url(http://java2s.com/Book/HTML-CSSImages/star.png) repeat top left; width: 200; border: 3; height: 150; font- size: 14"</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div
style="background-color: red; background-attachment: fixed; background- image: url(http://java2s.com/Book/HTML-CSSImages/star.png); background-repeat: repeat; background- positionx: top; background-position-y: left; width: 200; border: 3; height: 150; font- size: 14"</div>
</body>
</html>
Home
HTML CSS Book
CSS Reference
HTML CSS Book
CSS Reference
Property:
- background
- background-attachment
- background-color
- background-image
- background-position
- background-repeat
- border
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-width
- bottom
- clear
- clip
- color
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- float
- font
- font-family
- font-size
- font-style
- font-variant
- font-weight
- height
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- outline
- outline-color
- outline-style
- outline-width
- overflow
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- position
- quotes
- right
- text-align
- text-decoration
- text-indent
- text-transform
- top
- unicode-bidi
- vertical-align
- visibility
- white-space
- width
- word-spacing
- z-index
Related: