Common ways of specifying background properties in CSS include the following:
- background-attachment: Specifies whether the background stays fixed on the screen.
- background-color: Specifies the color of the background.
- background-image: Specifies the image to use for the background.
- background-position: Specifies the position of the background.
- background-repeat: Specifies whether the background image should be repeated vertically or horizontally or both.
Background-attachment
Below are two examples:
body {background-attachment: fixed; background-image: url("yp.jpg"); background-repeat: no-repeat; } | body {background-attachment: scroll; background-image: url("yp.jpg"); background-repeat: no-repeat; } |
Background-color
CSS Declaration | Output |
p {background-color: 00FF00;} | Green Background |
p {background-color: red;} | Red Background |
Background-image
Let's look at the example below:
CSS Declaration | Output |
p {background-image:url(yp.jpg);} | With Background Image |
The yellow square is image yp.jpg.
Background-position
- A combination of [top,center,bottom] and [left,center,right].
- Two percentage values: The first value indicates the horizontal percentage, and the second value indicates the vertical percentage.
- Two position values: The first value is the absolute horizontal position, the second value is the vertical position.
body { background-image: url("yp.jpg"); background-repeat: no-repeat; background-position: center center; } | body { background-image: url("yp.jpg"); background-repeat: no-repeat; background-position: 20% 20%; } |
Background-repeat
Examples below:
CSS Declaration | Output |
p { background-image:url(yp.jpg); background-repeat: no-repeat; } | Background does not repeat. |
p { background-image:url(yp.jpg); background-repeat: repeat-x; } | Background repeats horizontally. |
p { background-image:url(yp.jpg); background-repeat: repeat-y; } | Background repeats vertically. |
p { background-image:url(yp.jpg); background-repeat: repeat; } | Background repeats in both directions. |
0 comments:
Post a Comment