Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How background attribute is deprecated in HTML5?
In this article, we will discuss about the background attribute and how it is deprecated in HTML5.
What is Background Attribute?
In HTML, the “background” can be used as an attribute with an HTML element (such as div, table, body etc.). We can specify an image to set background of the webpage etc. The most frequently used image formats are PNG, JPEG, and GIF.
Syntax
Following is the syntax of background attribute with an HTML element −
<table background = "/images/html.gif"> </table>
This attribute is DEPRECATED in HTML5 and we are recommended not to use this. Instead, in HTML5, the preferred way to set the background by using CSS instead of HTML attributes.
In HTML5, the “background” is a shorthand CSS property that will be able to set all the background style properties (such as color, image, repeat, position, size and clip).
Syntax
Following is the syntax of CSS background property −
p {
background-color: red;
}
Example
In the example below, we are using the background attribute with HTML element −
<!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body background="https://media.tenor.com/kgNBW3GoSRoAAAAd/beach-waves.gif"></body> </html>
Following is the output for above program -
Example
In the following example, we are specifying the “background” property using CSS (cascading style sheet) instead of HTML attributes.
<!DOCTYPE html>
<html>
<head>
<title>How background attribute is deprecated in HTML5</title>
<style>
div {
border: solid 1px;
border-radius: 5px;
padding: 10px;
}
p {
font-size: larger;
text-align: center;
color: white;
}
.mydiv {
background-color: seagreen;
}
</style>
</head>
<body>
<div class="mydiv">
<p>Welcome to tutorialspoint</p>
</div>
</body>
</html>
Let us compile and run the above program, to produce the following result −
Example
Here, we are specifying the “background-color” property using CSS (cascading style sheet) instead of HTML attributes.
<!DOCTYPE html>
<html>
<head>
<title>How background attribute is deprecated in HTML5</title>
<style>
p {
font-size: larger;
text-align: center;
color: white;
}
.mydiv {
background-color: seagreen;
}
body {
background-color: beige;
}
</style>
</head>
<body>
<div class="mydiv">
<p>Welcome to tutorialspoint</p>
</div>
</body>
</html>
When we execute the query above, the output is obtained as follows −
71 Views
