Skip to Content

Which CSS property is used to change background color?

By: Author Color With Leo

Cascading Style Sheets (CSS) provide an easy way to modify the visual styling of HTML elements. One of the most common styling changes is to alter the background color of elements on a web page. There are a few different CSS properties that can be used to change an element’s background color, but the most straightforward is the background-color property.

The background-color Property

The background-color CSS property sets the background color of an element. Here is the syntax:


element {
  background-color: color; 
}

The color value can be set to any valid CSS color such as a hex code, RGB value, or color name like “red” or “blue”. Here are some examples of using background-color:


div {
  background-color: #ffffff; /* white */
}

p {
  background-color: rgb(0, 0, 255); /* blue */ 
}

.myClass {
  background-color: orange;
}

This will set the background color of all div elements to white, all p elements to blue, and all elements with class=”myClass” to orange. The background-color property is supported in all major browsers.

Setting Transparent Backgrounds

You can also use the background-color property to create transparent backgrounds. This is done by setting the color to the rgba() function or the hex code #ffffff with an alpha channel.


div {
  background-color: rgba(255, 255, 255, 0.5); /* 50% white */
} 

div {
  background-color: #ffffff7f; /* 50% white */
}

The rgba() function lets you define RGB colors with an alpha channel for opacity. The hex code #ffffff7f works similarly. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

Gradients and Background Images

While background-color is the easiest way to change background styling, CSS also provides options for gradients and background images.

For gradients, you can use the background-image property set to the linear-gradient() or radial-gradient() function. This lets you create smooth color fades as backgrounds.


div {
  background-image: linear-gradient(red, blue); /* fades from red to blue */
}

For background images, simply set background-image to the url path of the image:


body {
  background-image: url("bg.jpg"); 
}

You can even layer background images on top of background colors:


body {
  background-color: #f2f2f2;
  background-image: url("bg.png");
}

Controlling Background Positioning

By default, background colors and images will start at the top left of the element’s padding edge. But you can use other background properties to adjust the positioning:

  • background-position – Sets the initial position, e.g. “center” or “100px 50px”
  • background-repeat – Repeats or stretches the image, defaults to “repeat”
  • background-attachment – Sets whether the image scrolls with content
  • background-size – Sets the size of background images

div {
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-position: right center; 
  background-attachment: fixed;
}

This will show the image once, anchored to the right center of the element, without scrolling as the user scrolls.

Multiple Background Layers

Using comma separation, you can even specify multiple background images and colors on a single element.


div {
  background: 
    url("img1.png") left 10px no-repeat,
    url("img2.png") right 20px no-repeat,
    #f2f2f2;
}

The backgrounds will stack with the first background on top. This allows for some interesting effects with overlaying and blending backgrounds.

Browser Support

The background-color property has excellent browser support across all major browsers, including IE6 and up. Gradient and multiple background support is a bit more spotty in older browsers.

Here is a table summarizing compatibility for background properties:

Property IE Firefox Chrome Safari
background-color 6+ 1+ 1+ 1+
linear-gradient 10+ 3.6+ 10+ 5.1+
multiple backgrounds 9+ 3.6+ 1+ 1+

So the core background-color property can be used confidently. But for advanced background styling effects, checking for browser support is recommended.

Conclusion

The CSS background-color property is the standard way to change the background color of HTML elements. It accepts hex codes, RGB/RGBA values, and color names. For transparency, use RGBA or a hex code with alpha channel.

CSS also provides options for gradients, images, and multiple backgrounds. These have good but not perfect browser support. The background-color property works across all major browsers.

Some key points to remember:

  • Use background-color to change background colors
  • RGB/RGBA and hex codes support transparency
  • Additional properties position and repeat backgrounds
  • Gradients and multiple backgrounds have limitations in older browsers

So when you need to modify background styling of an element, reach for the background-color property. It provides an easy and well-supported way to adjust the visuals of any element on a web page.