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 page body and backgrounds of 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");
}

Through above code will display background img

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 axis only


Coding Tag

Coding Tag always happy to serve you in Information Technology (IT). Learn HTML, CSS, Javascript, PHP, Android, Digital Marketing, Latest IT News and many more.

Leave a Reply

avatar
  Subscribe  
Notify of