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

 

Color

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

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

 

 

 

Registration


A password will be e-mailed to you.

Feedback Form

Name (required)

Email (required)

Feedback