HTML Backgrounds

HTML gives you the opportunity to decorate your web page background; it provides you two effective ways to make an impressive background.

HTML Background with Colors

HTML Background with Images

Both the ways make decorative web pages. Now let's see both the ways one by one using proper examples:

---

HTML Background with Colors

The bgcolor tag is used to manage the background of an HTML element, especially the page body and backgrounds of the table. See the following syntax to access the bgcolor attribute with the HTML tag.

<tagname bgcolor="color_value">

This color_value can be added in any of the below formats:

Format 1 - By using color name: <table bgcolor="lime">

Format 2 - By using hex value: <table bgcolor="#f1f1f1">

Format 3 - By using a color value in RGB terms: <table bgcolor="rgb(0,0,120)">

HTML Background with Images

The background tag can also be used to manage the background of an HTML element, specifically table backgrounds and page body. You can identify an image to set the background of your HTML page or table.

See the syntax to use background attribute in the HTML tag.

<tagname background="Image URL"...>

The most often used image formats are GIF, PNG, and JPEG images.

Example:

<style>
.bg-h1{ background-color:#9B2D2E;}

.test{
width:300px;
height:50px;
background:#8C8C8C;
}
</style>
<h1 class="bg-h1"> Welcome to India </h1>
<div class="test">
<p> Welcome to India </p>
</div>

Background-image Example:

body{
background-image: url("ontime.png");
}

The above code will display the background image.

---

background-image with background-repeat

Example 1:

body{
background-image: url("ontime.png");
background-repeat: no-repeat;
}

Example 2:

body{
background-image: url("ontime.png");
background-repeat:repeat;
}

This above property repeat the image

Example 3:

body{
background-image: url("ontime.png");
background-repeat: repeat-x;
}

This above property repeat the image repeated along the horizontal axis only

Example 4:

body{
background-image: url("ontime.png");
background-repeat: repeat-y;
}

This above property repeat the image repeated along the vertical axis only