How to Add Backgrounds in HTML

The HTML background Attribute is used to control the background of the HTML code, We can change the background with images and colors to make It more attractive by using the HTML Element properties. Let us understand the HTML Background in detail.

How to Set HTML Background

We can set the HTML Background in different ways for designing the webpage, It can be used to change the variations of colors and background images to the page, also we can also adjust the positioning of the HTML page by using cascading style sheet properties in HTML or by using properties of HTML tags.

Now we will look at the HTML Background properties one by one with suitable Examples.

 1. Using HTML Background Colors

The <bgcolor> Attribute in HTML is used to set the background color of the HTML element mainly in the webpages and the table body, but the CSS property is used with the <style> Attribute nowadays for color styling of the background.

Syntax 

<tag bgcolor = “color_value”>

There are  three types of color value :

  • rgb(red, green, and blue)  which defines the strength of the color with a value between 0 and 255.
  • rrggbbrr (red), gg (green), and bb (blue)  which defines the hexadecimal values between 00 and ff.
  • hsl(hue, saturation, lightness) which defines the hue value between 0 and 360 for different colors and percentage values between 0 to 100 for saturation and lightness.

Example using bgcolor Attribute in HTML Background.

<!DOCTYPE html>    
<html>     
<head>    
<title>    
Bg-color Attribute in HTML Background
</title>    
</head>    
<body  bgcolor="maroon">   
 
<center>    
<h1> Codedec</h1>      
<br> <br>  
<center>  
<p> Codedec, is a site focused on many programming tools and technologies for everyone who wants to learn to program and software development.
At Codedec, You will find useful tutorials from scratch that will be helpful from a beginner level as well as for working professionals.
We are providing easy tutorials for computer programming languages and problem-solving algorithms for real-time practice. Free notes for students as well as video tutorials with examples for practice which will be easy to understand. </p>    
</center>    
</body>    
</html>

OUTPUT:

Example using CSS property with <style> Attribute in HTML Color Background.

 <html>
<head>
</head>
<body style="background-color:yellow;">
<center>    
<h1> CODEDEC</h1>      
<p>Codedec, is a site focused on many programming tools and technologies for everyone who wants to learn to program and software development.

At Codedec, You will find useful tutorials from scratch that will be helpful from a beginner level as well as for working professionals.

We are providing easy tutorials for computer programming languages and problem-solving algorithms for real-time practice. Free notes for students as well as video tutorials with examples for practice which will be easy to understand.</p>
</body>
</html>

OUTPUT:

 2. Using HTML Background Images

The <backgroud> Attribute in HTML is used to set the  background image in HTML element of the webpage. It can be passed as the value for the path of the image in the HTML background, we can also use CSS property to add images to the background of the HTML document.

Syntax

<tag background = “Image path”>

Example using backround Attribute in HTML Background image.

<html>  
<head>  
<title>   
Example of Background image  
</title>  
</head>  
<body background="/home/aman/Downloads/amanpic.jpeg">  
  
<font color="yellow">  
<h1> codedec website for learning </h1> 
<font color="black"> 
<p> <a href="https://codedec.com/"> link  </a>  For the  Website </p>
</font>  
</body>  
</html>

OUTPUT:

Example using CSS property with <style> Attribute in HTML Background for repeat Images.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('/home/aman/Desktop/frames/codedeclogo.png');
}
</style>
</head>
<body>

<h1>Background Repeat</h1>
<p> example of style attribute with repeat image in HTML background</p>
</body>
</html>

OUTPUT:

3. Using  HTML Background Positioning

The background-position Attribute is used to set the background image size and fonts in a certain position on the webpage in percentage and pixel values.

Example of HTML Background using  background-position Attribute in percent (%) value.

<!DOCTYPE html>
<html>
<head>
<div style="background-image: url(/home/aman/Desktop/frames/codedeclogo.png);
background-repeat:no-repeat;
background-position: 50% 50%;
border:2px solid #CD5C5C;
width:350px;
height:300px">
EXAMPLE OF BACKGROUND IMAGE USING POSTION !!

WELCOME TO OUR WEBSITE
</div> 
</body>
</html>

OUTPUT: