CSS Background Color

The CSS background color property is used to make any section or element stand out inside the website. The background color will affect the entire section of the element and will display the text and images inside that section in a more efficient way.

You can use CSS background color in 5 ways such as Keyword value, RGB value, Hexadecimal value, HSL value, and Global value.

CSS Background Color Effects

Below is some syntax of background color, which you can use for your website or design.

.myclass{
	background-color: red;
}
.myclass{
	background-color: rgb(230, 10, 10);
}
.myclass{
	background-color: #000;
}
.myclass{
	background-color: hsl(50, 70%, 50%);
}
.myclass{
	background-color: unset;
}

<div class=”myclass”>
	<h1>Welcome Am Testing</h1>
</div>

But if you want to make your syntax smaller than you can use the property below. You can also use only background instead of background-color.

.myclass{
    background: red;
 }

<div class="myclass">
    <h1> Welcome Am Testing </h1>
</div>

If you want to give background-color to your tag directly instead of your class, then for that you have to use the syntax given below.

p {
	background-color: red;
}
div {
	background-color: #000;
}
h1 {
	background-color: pink;
}
span {
	background-color: #fff;
}
button {
	background-color: yellow;
}
a {
	background-color: green;
}
img {
	background-color: black;
}

But if you want to become a professional coder, then you should always work in a short cut manner. An example is given below, and it is shown that if you want to give background color to several elements at once, you can create your code like this.

p, h1, button {
background-color: red;
}

CSS Background Image

If you want to use the image in the background instead of the background color, then you can follow the syntax given below.

.myclass{
    background-image: url("demo.jpg");
    padding: 100px;
    background-repeat: no-repeat;
 }

Types Of CSS Background Properties

  • Background-color
  • Background
  • Background-image
  • Background-position
  • Background-size

Browser Support

  • Mozilla Firefox
  • Google Chrome
  • Internet Explorer
  • Opera
  • Safari

Frequently Asked Questions

We have answers to some questions that people search on the Internet everyday. Let us know what are those questions and what are their answers.

How do I link CSS to HTML?
To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do you underline in HTML?
With the u tag you can underline your text.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

Related: 5 Easiest Ways To Apply Padding CSS