Home > CSS > Color and Background Propertiesprinter version

Color and Background Properties

CSS allows you to set the color properties of any text used within an element as well as the background color or a background image.

Color Units

Color can be expressed in different ways.

By name e.g. red or green
By RGB value which can be represented in several ways
- Hexadecimal e.g. #ff0000.
- Decimal e.g. 255,0,0.
- Percentage e.g. 100%,0%,0%.

Example of Setting the Element Properties of a Class

.element_class_name {
color: #0000ff;
background-color: #ffffff;
background: url(images/background_image.jpg);
background-repeat: no-repeat
}

Property	Description	Values
color	Sets the text color within the element.	color
background−attachment	Determines whether a background image will remain fixed or scroll with the page.	fixed scroll
background−color	Sets the background color.	transparent color
background−image	Sets an image as the background. You must specify a URL for the image. The syntax is background-image: url(URL) where URL is absolute or relative.	none url (URL)
background−position	Sets the location of the background image using 2 of the values from those below. Keywords top, center, bottom, left, right Percentage % Length px	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpx ypx
background−repeat	Sets whether the background image is to repeat or how it is to repeat. Default repeats the image in both directions, repeat-x repeats across and repeat-y repeats down.	repeat repeat-x repeat-y no-repeat

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP