Weekday Tip: CSS Shorthand pt.2

by Fire G on May. 6th in CSS, Coding, Weekday Tips with 2 comments.

Background

The background property is a shorthand property for setting all background properties in one declaration. The order of declarations is background-color, background-image, background-repeat, background-attachment, and then background-position. Remember that default values for these properties are not set.

body {background: #[hex-color] url([image URL]) [repeat] [attachment] [position];}

Background-color:

Color name (black)
HEX number (#000000)
RGB value (rgb(0,0,0 ))
Transparent

Background-image:

URL
None

Background-repeat:

Repeat-x (horizontally)
Repeat-y (vertically)
Repeat (both)
No-repeat

Background-attachment:

Fixed
Scroll

Background-position:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
X% Y%
Xpx/em Ypx/em

About the author: Fire G

Hey, I'm the founder of Fire Studios, and thus, have my hands in everything that goes on here at FS. I manage the content, moderate the comments, design everything, code everything, provides a lot of articles, host the official podcast FS-Air, and run/manage most of the other sites in the FI family. Often times I'll come to be working on so many things that I hardly accomplish much, but that's what makes me who I am.