Chapter 12 : CSS Backgrounds
Sunday, 27 May 2012
0
comments
Inherited: No
Background
You can style the background of an element in one declaration with the background property.
background: #ffffff url(path_to_image) top left no-repeat fixed;
- attachment
- color
- image
- position
- repeat
Or you can set each property individually
Background Attachment
If you are using an image as a background. You can set whether the background scrolls with the page or is fixed when the user scrolls down the page with the background-attachmentproperty
background-attachment: value;
Values:
- fixed
- scroll
Background Color
You can specifically declare a color for the background of an element using the background-color property.
background-color: value;
Values:
- color name
- hexadecimal number
- RGB color code
- transparent
Background Image
You can set an image for the background of an element using the background-image property.
background-image: url(path_to_image);
Values:
- url
- none
Background Position
You can position an image used for the background of an element using the background-position property.
background-position: value;
Values:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x-% y-%
- x-pos y-pos
Background Repeat
You can set if an image set as a background of an element is to repeat (across=x and/or down=y) the screen using thebackground-repeat property.
background-repeat: value;
Values:
- no-repeat
- repeat
- repeat-x
- repeat-y