HTML Backgrounds

Prev
Next

HTML Background colors are added to the website to make it more attractive.

info:
Background colors can be added to elements like header(h1,h2,h3,h4,h5,h6), body, paragraph(p), tables etc.

CSS uses border color more effectively. For example- You can add a color to div, classes etc. This is covered in detail in our CSS tutorial.

Syntax:
bgcolor=value
or
background-color:value

HTML Background

Example of Background Colors to body, headers, and paragraph

Example

<h2 style="background-color:tomato;">Background color of h2 tag is tomato</h2>

<h2 style="background-color:blue;">h2 tag background color is dodgerblue</h2>

<p style="background-color:orange;">
Background color added to the paragraph. You should always give a good background color which blends with other HTML elements properly.
</p>
Run the Code

Background Colors to table

You can add a background color to HTML table using bgcolor attribute.

Example

<table border ="1" bgcolor ="DEEPSKYBLUE">
Run the Code

Backgrounds Image in Table

We can also give backgrounds image to the table.

Table background Image

Example

<table border ="1" Background ="https://preview.ibb.co/bHNEGL/stripes.jpg">
Run the Code

Interview Questions & Answer

Use the CSS background-image property to add a background image.
Example,

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("flower.jpg");
  padding: 30px;
}
</style>
</head>
<body>
<html>
 <head>
 <body>
  <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </p> 
  </body> 
</html>

<!DOCTYPE html>
<html>
<body>

<h2>TutorailBrain Courses</h2>

<table border ="1" Background ="https://preview.ibb.co/bHNEGL/stripes.jpg">
<tr>
<th>BIG DATA </th>
<th>DIGITAL MARKETING</th> 
<th>MAINFRAME </th>
</tr>
<tr>
<td>Spark</td>
<td>SEO</td>
<td>COBOL</td>
</tr>
<tr>
<td>Scala</td>
<td>Social Media</td>
<td>DB2</td>
</tr>
<tr>
<td>HBase</td>
<td>Content</td>
<td>JCL</td>
</tr>
<tr>
<td>Kafka</td>
<td>Analytics</td>
<td>CICS</td>
</tr>
</table>

</body>
</html>
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!