Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS background-color Property

Posted in CSS Tutorial
Updated on Sep 04, 2024
By Mari Selvan
👁️ 20 - Views
⏳ 4 mins
💬 1 Comment
CSS background-color Property

Photo Credit to CodeToFun

🙋 Introduction

The background-color property in CSS is one of the most commonly used properties to define the background color of an element. It allows you to set a solid color behind the content within an element, helping to create visual distinctions between different sections of a webpage.

💡 Syntax

The syntax for the background-color property is simple. You can apply it to any HTML element, and you can specify the color using any valid CSS color value.

Syntax
Copied
Copy To Clipboard
element {
  background-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the background-color property is transparent, which means the element has no background color, allowing the background of the parent element to show through.

🏠 Property Values

ValueDescription
named-colorA color keyword, such as blue, red, green, etc.
hexadecimal valueA hex code representing a color, such as #ff5733.
RGB valueAn RGB color value, such as rgb(255, 255, 255) for white.
HSL valueAn HSL color value, such as hsl(0, 0%, 100%) for white.
transparentThe default value, which means no background color will be applied.

📄 Example

In this example, we'll set the background color of a <div> element to light blue.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS background-color Example</title>
  <style>
    div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Background Color</h1>
  <div>
    This is a div with a light blue background.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The background-color property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera, as well as older browsers. You can confidently use this property in your web projects knowing that it will render consistently across different platforms.

🎉 Conclusion

The background-color property is an essential tool for creating visually appealing web designs. By setting the background color of elements, you can emphasize content, create sections, and enhance the overall user experience on your website. Experiment with different colors and combinations to find the perfect look for your site.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy