Crafting CSS Background-Color and its Legal Values

This article presents relevant facts in crafting your CSS background and how they are crafted specifically for a background-color. It emphasizes the relevance of possible color values in CSS background-color.

In any web page you see, backgrounds primarily establish a nice catchy feel because they dictate the overall style of your page. Creating a background with the use of Cascading Style Sheet (CSS) mainly sets the background properties of any element you use. Also, in crafting background-color, possible color values must be taken into great consideration since they provide exact effect of your page. Let us identify what are those legal color values used in CSS background-color property.

Legal Color Values

Before proceeding, you have to consider that there are certain accepted color values in CSS that dictates the background color properties. Generally, background color can be used with the following method:

Hexadecimal color – this is specified in a pound sign (#) followed by 6 hex values. It is specified with: #RRGGBB, which stands for RR (red), GG (green) and BB (blue). All integers must be between 0 (lowest) and FF (highest). For example:


This shall show that the background color of the paragraph shall be red since it has the highest value among the three.

RGB color – this is specified with: rgb which stand for (red, green, blue). Each parameter defines the intensity of the color which can be between 0 and 255 or a percentage value (from 0% to 100%). For example:


This shall show that the background color of the paragraph shall be green since it has the highest value basing above.

Color Name – this is the most easily understood type for which the exact names are used instead of codes. You have to check if color names are supported by CSS. For example:


Creating the Background Color Properties

In making CSS code, you have to be familiar with the basic CSS property rule. It consists of the name of property, colon, space and then the value with its specificity. What makes CSS property confusing is that you need to have a good deal of memory and attention for different codes of elements used that could make it trickier. The things you should look into are:

  • All properties can only detect specific range of values. You need to check for these specifications or else it won’t work.
  • Never get an erroneous punctuation
  • Get the right and exact word of the property. No more and no less.

The ‚Background-Color’ Property

If we are to apply all information mentioned above in CSS, you have to learn few more examples. The background-color property illustrates the back color of an element. For example:

body {background-color: #FFCC66;}

h1 {color: #990000;background-color: #FC9804;}

In this illustration, <body> element contains all the content of an HTML document. If you want to change the back color of the entire web page, then this property should be applied to <body> element. In the other hand, <h1> element pertains to the content of the heading. Here you can apply back colors and text of the headline.