CSS Background Properties | |
---|---|
Value | Appearance |
Background Color | |
background-color: initial; | |
background-color: transparent; | |
background-color: lightgray; | |
Background Image | |
background-image: initial; | |
background-image: none; | |
background-image: linear-gradient(khaki, coral); | |
background-image: radial-gradient(khaki, coral); | |
background-image: conic-gradient(khaki, coral); | |
background-image: repeating-linear-gradient(khaki, coral 33.3%); | |
background-image: repeating-radial-gradient(khaki, coral, khaki 50%); | |
background-image: url('XoaXLogo.png'); | |
background-image: url('XoaXLogo.png'), url('Texture.png'); | |
background-image: url('XoaXLogo.png'), linear-gradient(khaki, coral); | |
Background Position | |
background-position: initial; Note: default is top left, or center when one position is specified |
|
background-position: top left; | |
background-position: center; | |
background-position: bottom right; | |
background-position: top; Note: with no repeat |
|
background-position: right; Note: with no repeat |
|
background-position: 30% 50%; Note: with no repeat |
|
background-position: 100px 20px; Note: with no repeat |
|
Background Size | |
background-size: initial; | |
background-size: auto; | |
background-size: 200px; | |
background-size: 200px 15px; | |
background-size: 50%; | |
background-size: 50% 15%; | |
background-size: cover; | |
background-size: contain; | |
Background Repeat | |
background-repeat: initial; | |
background-repeat: repeat-x; | |
background-repeat: repeat-y; | |
background-repeat: no-repeat; |
|
background-repeat: repeat; |
|
background-repeat: space; |
|
background-repeat: round; |
|
Background Origin | |
background-origin: initial; | |
background-origin: padding-box; | |
background-origin: border-box; | |
background-origin: content-box; | |
Background Clipping | |
background-clip: initial; | |
background-clip: border-box; | |
background-clip: padding-box; | |
background-clip: content-box; | |
Background Attachment | |
background-attachment: initial; | |
background-attachment: scroll; | |
background-attachment: fixed; | |
background-attachment: local; |
© 20072024 XoaX.net LLC. All rights reserved.