CSS Background Color and Background Property to Assign Color or Image

April 4th, 2019

Nilesh Chaurasia

CSS Background Color Property

Background Color Property is used to change the background color of an HTML Element, to make more effective.

Example 1 – CSS Background Color Property to Assign light green color to HTML p element.

<!DOCTYPE html>
<html>
  <head>
    <style>
		p
		{
		 background-color: lightgreen;
		}
    </style>
  </head>
  <body>
    <p>Lorem ipsum lvinar mattialiquet enim tortor at auctor. Donec ultrices ium qua midnibh tortor id aliq ueted ris.</p> 
  </body>
</html>

In the above code, we define the background-color to an HTML Elements.

CSS Background Color Property to Assign Color to p tag — Fig.1 – Use of the Property to Assign Background Color for p element

Caution:You can define background-color by color-names, HEX Code and RGB Values.

Example 2 – Use of Background Color Property with Hex code and RGB values

<!DOCTYPE html>
<html>
  <head>
    <style>
		p
		{
		 background-color: #b2ed9f;
		}
		body
		{
		 background-color: rgb(28,139,151);
		}
		h1
		{
		 background-color: #ecc272;
		}
    </style>
  </head>
  <body>
		<h1>The Main Heading<h1>
		<h2>The Sub-heading </h2>
		<p>Lorem ipsum lvinar mattialiquet enim tortor at auctor. Donec ultrices ium qua midnibh tortor id aliq ueted ris.</p> 
  </body>
</html>

In the above code, we define the different background-colors to different HTML Elements.

Here, we define background-color to paragraph, <h1> and <h2> elements.