HTML background Attribute
The obsolete HTML background attribute was historically used to specify an image displayed behind the content of an element.
background attribute is obsolete and should not be used in modern HTML. Use CSS background properties such as background-image instead.
Historical Syntax
The background attribute contained the URL of an image that was displayed behind the element's content:
<body background="background.jpg">
Browsers typically repeated the image horizontally and vertically when it was smaller than the area being covered.
Historical Elements
The background attribute was historically used with several elements, particularly the document body and table-related elements.
| Element | Historical Purpose |
|---|---|
<body> |
Displayed a background image behind the webpage content. |
<table> |
Displayed a background image behind a table. |
<thead>, <tbody>, <tfoot> |
Displayed a background image behind a group of table rows. |
<tr> |
Displayed a background image behind a table row. |
<td>, <th> |
Displayed a background image behind an individual table cell. |
Historical Use
The background attribute provided an early way to decorate webpages and tables with images before CSS became the standard method for controlling presentation.
Because the attribute provided little control over how the image was displayed, browsers generally tiled smaller images to fill the available background area. Webpage authors had limited control compared with the sizing, positioning, repeating, and other background options available through CSS.
Why It Became Obsolete
The background attribute mixed presentation with the structural HTML of a webpage. CSS provides a separate and much more flexible way to control background images and other visual presentation.
Modern CSS can control the background image, position, size, repeat behavior, attachment, and other background characteristics without adding presentational attributes to the HTML markup.
Modern Alternative
Use the CSS background-image property to add a background image to an element.
Historical HTML
<body background="/img/images/image-600x400.png">
Modern HTML and CSS
<div class="background-example">
This element has a CSS background image.
</div>
<style>
.background-example {
background-image: url("/img/images/image-600x400.png");
}
</style>
CSS also provides properties such as background-repeat, background-position, and background-size for controlling how the background image is displayed.
Learn More About CSS Backgrounds
The CSS tutorials provide more information about adding and controlling background images:
- CSS Backgrounds - Learn the fundamentals of styling element backgrounds with CSS.
- CSS Background Images - Learn how to add background images with CSS.
- CSS Background Repeat - Control whether and how a background image repeats.
- CSS Background Position - Control the position of a background image.
- CSS Background Size - Control the size of a background image.
Legacy Browser Support
The obsolete background attribute was widely recognized by older browsers on the <body> element and several table-related elements. Some modern browsers may continue to recognize historical uses for compatibility with older webpages.
Browser recognition of the background attribute does not make it valid modern HTML. When maintaining older source code, replace the attribute with the appropriate CSS background properties.
For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.
Related Attributes
Other obsolete HTML attributes historically used to control colors and visual presentation include:
bgcolor- Historically used to specify a background color.text- Historically used to specify the document text color.link- Historically used to specify the color of unvisited links.alink- Historically used to specify the color of active links.vlink- Historically used to specify the color of visited links.
Specifications
The background attribute on elements where it was historically used for presentation is obsolete in modern HTML. Presentational background images should be defined with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.
