Color & Background Properties


Property Valid Values Sample Usage Applies to Inherited?
Color color { color:salmon; } all elements yes
background-color color | transparent { background-color:crimson; } all elements no
background-image url | none { background-image:url(bgWood.jpg); } all elements no
background-repeat repeat | repeat-x | repeat-y | no-repeat { background-repeat:no-repeat; } all elements no
background-attachment scroll | fixed { background-attachment:fixed; } all elements no
background-position position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] { background-position: top center;} block-level and replaced elements no
background transparent | color || url || repeat || scroll || position { background: silver url(bgRock.jpg) repeat-y } all elements no



You can set the color of text with the following:

color: value;

Possible values are

color name – example:(red, black…)

hexadecimal number – example:(#ff0000, #000000)

RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))


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


background-attachment: value;







Background Color

You can specifically declare a color for the background of an element

using the background-color property.


background-color: value;



  • 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);



  • url
  • none


Background Position

You can position an image used for the background of an element using

the background-position property.


background-position: value;



  • 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



background-repeat: value;



  • repeat
  • repeat-x
  • repeat-y





A password will be e-mailed to you.

Feedback Form

[contact-form-7 id="98" title="Feedback Form"]