CSS Background Color and Background Property to Assign Color or Image

Ad Banner Image

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.

Background Color with Hex and RGB Values
Fig.2 – Background Color Example with Hex and RGB Values

Note:By the use of background-color property, the look and feel of the web pages are appealing and easy to read the text.

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress