Tutorial 12: CSS Backgrounds

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;

Values:

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-attachment property

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 the background-repeat property.

background-repeat: value;

Values:

repeat
repeat-x
repeat-y