Home » CSS: Color and Backgrounds

CSS: Color and Backgrounds

olor Values: name, #hex, rgb(R%, G%, B%), rgb(R, G, B)
You have four options for specifying color:

As a standard color name
As a hexadecimal value
As an RGB percentage
As a decimal value from 0 to 255

From other HTML work, you are probably familiar with the standard color names and color hex values. You can use any of these as color values with CSS.

Click here to open a new window with a reference chart of the standard names and their hex values.

CSS also offers a new option: RGB values. RGB allows you to describe color as a percentage of red, green, and blue, the three colors that are used to display an image on a monitor.

If all three are set at 100% you’ll get pure white. If all three are set at 0% you’ll get pure black. If any one is set to 100% and the others to 0%, you’ll get a pure red, green, or blue. Varying percentages in between give you different hues.

You specify RGB values by typing the letters rgb, an open parenthesis, the three percentages, and a close parenthesis, like this:

	{color: rgb(0%, 10%, 60%)}

You can also specify RGB values as a decimal number. If you are working with a program like PhotoShop, you are probably already familiar with these values; it is one of the ways PhotoShop describe color. To use a decimal number value, type the letters rgb, an open parenthesis, the three numbers separated with a comma, and a close parenthesis, like this:

	{color: rgb(255, 0, 0}

Color: {color: name/#hex/rgb(R%, G%, B%)/rgb(R, G, B)}
The color property selects a foreground color. Typically, the foreground color is the color of the text in the HTML element.

Example: This creates colored text for the paragraph element.

	P {color: green}

If you are using a CSS-enabled browser, this paragraph appears in green, with a named value of green.

	P {color: #9966cc}

If you are using a CSS-enabled browser, this paragraph appears in purple, with a hex value of 9966cc.

	P {color: rgb(70%, 0%, 30%)}

If you are using a CSS-enabled browser, this paragraph appears as 70% red, 0% green, and 30% blue.

	P {color: rgb(170, 0, 100)}

If you are using a CSS-enabled browser, this paragraph appears as 170 red, 0 green, and 100 blue.

Background Color: {background-color: colorname/hexvalue/rgb(R%, G%, B%)}
The background-color property specifies a background color. The background of an element is the space around the element. For example, the background of a headline is a bar, the depth and length of the headline text. The background of the body is the entire page.

Example: This sets a style rule for the background color of a head level one:

	h1 {background-color: darkcyan}

Project Cool

Background Image: {background-image: url(urlname)}
The background-image property specifies what image to display in the HTML element’s background area. It calls the image by its relative or full URL.

Example: This sets a style rule that calls an image named “ocean.gif” as the background for the table element:

	table {background-image: url(../images/ocean.gif)}

Background Image Repeat: {background-repeat: repeat/repeat-x/repeat-y/no-repeat}
The background-repeat property specifies how and if a background image gets repeated. The image can repeat:

In both X and Y directions
In just the X direction
In just the Y direction
In no direction. You can prevent the background image from repeating at all.

Example: This sets a style rule that calls an image named “ocean.gif” as the background for the body element and repeats it in both the X and Y directions:

	body {background-image: url(../images/ocean.gif);	      background-repeat: repeat}

Background Image Attachment: {background-attachment: scroll/fixed}
The background-attachment property specifies whether the background images scrolls or remains fixed in the same location on the page. This can be handy if you have, say a watermark logo, that you always want to appear in the center of your reader’s browser window. You can use these controls to fix its position while the content scrolls on top of it.

Example: This sets a style rule that calls an image named “ocean.gif” as the background for the body element and prevents the background image from scrolling with the page:

	body {background-image: url(../images/ocean.gif);	      background-attachment: fixed}

Background Image Position: {background-position: %vertical % horizontal – or – top/center/bottom left/center/right}
The background-position property lets you place a background image in a specific location within the element’s background. You can specify its placement in two ways:

As X and Y percentages.
Example: This places an image named logo.gif 20% from the top of the page and 30 % from the left of the page. It also fixes it in place:
```
	body {background-image: url(../images/logo.gif); 	background-position: 20% 30%;	background-attach: fixed}
```
As a vertical and horizontal alignment, relative to the element.
Example: This places an image named logo.gif on the page at the top vertically and centering it horizontally:
```
	body {background-image: url(../images/logo.gif); 	background-position: top center}
```

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.