CSS: Background-color Property - TechOnTheNet

Advertisement

1. Home
2. CSS

• Databases
• SQL
• Oracle / PLSQL
• SQL Server
• MySQL
• MariaDB
• PostgreSQL
• SQLite

• MS Office
• Excel
• Access
• Word

• Web Development
• HTML
• CSS
• JavaScript
• Color Picker

• Programming
• C Language

• More
• ASCII
• Unicode
• Linux
• UNIX
• Techie Humor

Advertisement

Font Properties

• font
• font-family
• font-size
• font-style
• font-variant
• font-weight
• line-height

Text Properties

• color
• letter-spacing
• text-align
• text-decoration
• text-indent
• text-shadow
• text-transform
• white-space
• word-spacing
• word-wrap

Background Properties

• background
• background-attachment
• background-color
• background-image
• background-position
• background-repeat

Positioning Properties

• bottom
• clear
• float
• left
• position
• right
• top

Box Model Properties

• box-shadow
• height
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• min-height
• min-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• width

List Style Properties

• list-style
• list-style-image
• list-style-position
• list-style-type

Outline Properties

• outline
• outline-color
• outline-style
• outline-width

Table Properties

• border-collapse
• border-spacing
• caption-side
• table-layout
• vertical-align

Border Properties

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-color
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width

Page Break Properties

• page-break-after
• page-break-before
• page-break-inside

Other Properties

• display
• opacity

CSS Selectors

• :active
• :after
• :before
• :first-child
• :first-letter
• :first-line
• :hover
• :last-child
• :link
• :nth-child
• :nth-last-child
• :only-child
• :visited
• child (>)
• descendant

CSS: background-color property

This CSS tutorial explains how to use the CSS property called background-color property with syntax and examples.

Description

The CSS background-color property defines the background color of an element.

Syntax

The syntax for the background-color CSS property is:

background-color: value;

Parameters or Arguments

value

The background color of the element. It can be one of the following:

Value	Description
#RRGGBB	Hexadecimal representation of the background color div { background-color: #FF0000; }
rgb()	RGB representation of the background color div { background-color: rgb(255,0,0); }
color name	Name of the background color (ie: red, blue, black, white) div { background-color: red; }
transparent	Indicates that the element shows the background-color of the element behind it. The default value for CSS background-color is transparent. div { background-color: transparent; }
inherit	Element will inherit the background-color from its parent element div { background-color: inherit; }

Note

• The value in the CSS background-color property can be expressed as a hexadecimal value, rgb value, or as a named color.
• Background-color values can be expressed in hexadecimal values such as #FFFFFF, #000000, and #FF0000.
• Background-color values can be expressed using rgb such as rgb(255,255,255), rgb(0,0,0), and rgb(255,0,0).
• Background-color values can be expressed as named colors such as white, black, and red.
• Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS background-color property has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Phone
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the background-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let's look at a CSS background-color example where we have provided a hexadecimal value for the color.

div { background-color: #FFFFFF; }

In this CSS background-color example, we have provided a hexadecimal value of #FFFFFF which would display the background color as white for the <div> tag.

Using RGB

We can also provide the background-color value using rgb.

div { background-color: rgb(255,255,255); }

In this CSS background-color example, rgb(0,0,0) would also display background color as white for the <div> tag.

Using Color Name

Let's look at a CSS background-color example where we have provided the value as a named color.

div { background-color: white; }

In this CSS background-color example, we have provided the name "white" which would also set the background color of the <div> to white.

Color Names

Below is a list of the color names to choose from:

Color Name	Hex Value	Swatch
aliceblue	#F0F8FF
antiquewhite	#FAEBD7
aqua	#00FFFF
aquamarine	#7FFFD4
azure	#F0FFFF
beige	#F5F5DC
bisque	#FFE4C4
black	#000000
blanchedalmond	#FFEBCD
blue	#0000FF
blueviolet	#8A2BE2
brown	#A52A2A
burlywood	#DEB887
cadetblue	#5F9EA0
chartreuse	#7FFF00
chocolate	#D2691E
coral	#FF7F50
cornflowerblue	#6495ED
cornsilk	#FFF8DC
crimson	#DC143C
cyan	#00FFFF
darkblue	#00008B
darkcyan	#008B8B
darkgoldenrod	#B8860B
darkgray	#A9A9A9
darkgrey	#A9A9A9
darkgreen	#006400
darkkhaki	#BDB76B
darkmagenta	#8B008B
darkolivegreen	#556B2F
darkorange	#FF8C00
darkorchid	#9932CC
darkred	#8B0000
darksalmon	#E9967A
darkseagreen	#8FBC8F
darkslateblue	#483D8B
darkslategray	#2F4F4F
darkslategrey	#2F4F4F
darkturquoise	#00CED1
darkviolet	#9400D3
deeppink	#FF1493
deepskyblue	#00BFFF
dimgray	#696969
dimgrey	#696969
dodgerblue	#1E90FF
firebrick	#B22222
floralwhite	#FFFAF0
forestgreen	#228B22
fuchsia	#FF00FF
gainsboro	#DCDCDC
ghostwhite	#F8F8FF
gold	#FFD700
goldenrod	#DAA520
gray	#808080
grey	#808080
green	#008000
greenyellow	#ADFF2F
honeydew	#F0FFF0
hotpink	#FF69B4
indianred	#CD5C5C
indigo	#4B0082
ivory	#FFFFF0
khaki	#F0E68C
lavender	#E6E6FA
lavenderblush	#FFF0F5
lawngreen	#7CFC00
lemonchiffon	#FFFACD
lightblue	#ADD8E6
lightcoral	#F08080
lightcyan	#E0FFFF
lightgoldenrodyellow	#FAFAD2
lightgray	#D3D3D3
lightgrey	#D3D3D3
lightgreen	#90EE90

Color Name	Hex Value	Swatch
lightpink	#FFB6C1
lightsalmon	#FFA07A
lightseagreen	#20B2AA
lightskyblue	#87CEFA
lightslategray	#778899
lightslategrey	#778899
lightsteelblue	#B0C4DE
lightyellow	#FFFFE0
lime	#00FF00
limegreen	#32CD32
linen	#FAF0E6
magenta	#FF00FF
maroon	#800000
mediumaquamarine	#66CDAA
mediumblue	#0000CD
mediumorchid	#BA55D3
mediumpurple	#9370D8
mediumseagreen	#3CB371
mediumslateblue	#7B68EE
mediumspringgreen	#00FA9A
mediumturquoise	#48D1CC
mediumvioletred	#C71585
midnightblue	#191970
mintcream	#F5FFFA
mistyrose	#FFE4E1
moccasin	#FFE4B5
navajowhite	#FFDEAD
navy	#000080
oldlace	#FDF5E6
olive	#808000
olivedrab	#6B8E23
orange	#FFA500
orangered	#FF4500
orchid	#DA70D6
palegoldenrod	#EEE8AA
palegreen	#98FB98
paleturquoise	#AFEEEE
palevioletred	#D87093
papayawhip	#FFEFD5
peachpuff	#FFDAB9
peru	#CD853F
pink	#FFC0CB
plum	#DDA0DD
powderblue	#B0E0E6
purple	#800080
red	#FF0000
rosybrown	#BC8F8F
royalblue	#4169E1
saddlebrown	#8B4513
salmon	#FA8072
sandybrown	#F4A460
seagreen	#2E8B57
seashell	#FFF5EE
sienna	#A0522D
silver	#C0C0C0
skyblue	#87CEEB
slateblue	#6A5ACD
slategray	#708090
slategrey	#708090
snow	#FFFAFA
springgreen	#00FF7F
steelblue	#4682B4
tan	#D2B48C
teal	#008080
thistle	#D8BFD8
tomato	#FF6347
turquoise	#40E0D0
violet	#EE82EE
wheat	#F5DEB3
white	#FFFFFF
whitesmoke	#F5F5F5
yellow	#FFFF00
yellowgreen	#9ACD32

NEXT: background-image Share on:

Advertisement

Home | About Us | Contact Us | Testimonials | Donate

While using this site, you agree to have read and accepted our Terms of Service and Privacy Policy.

Copyright © 2003-2024 TechOnTheNet.com. All rights reserved.