Deprecated in HTML5. Do not use.

HTML Body Background: Here Are The CSS Properties To Replace It With

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Attribute of
HTML Body Tag: Master The Most Important HTML Element Now
What does HTML Body Background: Here Are The CSS Properties To Replace It With do?
Was used to set the background color and image for the document. Deprecated. Use CSS instead.

Use CSS instead

In previous version of HTML, the <body> element had a large number of styling attributes like background. All of them have been deprecated in HTML5. The correct way to style anything is with CSS.

The CSS background- properties

There are several CSS properties used for setting the background of an element. These can be used on <body> to set the background of an entire page.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Setting a background-color

The most straightforward way to change the default (white) background for a page is to use background-color on the body.

body {  background-color: #efefef; } 

One thing you have to watch out for, though — if you set the background-color too dark, the default black text won’t be readable, so you’ll need to change it (or not make the background so dark). See our tutorial on dark backgrounds for more tips on dark-background site design.

Setting a background-image

All of the other CSS background- properties are connected with setting an image.

  • background-image — The source URL for the image.
  • background-repeat — Whether and how the image should tile.
  • background-attachment — Whether and how the image should scroll with the content.
  • background-position — How the image should be placed relative to the element.

background-image

The background-image property needs to be a URL to the image. This usually looks like this:


body {  background-image: url(/path/to/image.png); } 

When using the url() value, you have three choices:

  • relative path based on the root domain of the CSS file — begin with a slash (/) as shown above
  • relative path based on the immediate directory of the CSS file — no slash ( url(path/to/image.png) )
  • absolute URL, if you are linking to an external resource — url(http://example.com/path/to/image.png)

Remember that the relative URLs are relative to the CSS file, not the page.

background-repeat

This property specifies whether and how the image will repeat, or tile. The default is for the image to repeat both horizontally and vertically. You can change this by specifying a value other than repeat.

  • repeat — The default. Repeats in both directions.
  • repeat-x — Repeats only on the x-axis (horizontally across the element).
  • repeat-y — Repeats only on the y-axis (vertically down the element).
  • no-repeat — Does not repeat.

background-attachment

This property affects how the background image responds to scrolling.

  • fixed — The background is fixed relative to the viewport (browser window). Scrolling the contents of the element or scrolling the contents of the entire page will not cause the image to move.
  • scroll — The background is fixed relative to the boundaries of the element’s box. Scrolling the entire page (moving the placement of the element itself) will cause the image to move with the element.
  • local — The background is fixed relative to the contents of the image. If the contents of the image are scrolled, the background will scroll with them. If the document as a whole is scrolled (causing the element content to be moved), the image will move with the element.

This is a little hard to visualize, so you may want to see this example of all three attachment values, side-by-side. Note that in the context of the <body> element, scroll and local will have the same effect.

background-position

There are several ways to specify the position of a background image, but the easiest is to use the positioning keywords left, right, top, bottom, and center. This gives you nine possibilities:

  • left top
  • left center
  • left bottom
  • center top
  • center center
  • center bottom
  • right top
  • right center
  • right bottom

You can omit center if you like, as it is the default value — but it’s a good idea to include for clarity’s sake.

The background shorthand property

You can combine all of these rules into a single line labelled background.

body {  background: #efefef url(/path/to/light-texture.png) repeat fixed top left; } 

When using the shorthand property, you can omit any of the components if you just want the default value. You must keep them in the same order, though. Note that you should almost always include a background color, even if you want to have a background fully-covered by an image tile. Especially if the image is dark, you’ll want a color that closely matches the overall color of the image. That way, if the image load fails (or is slow), the text is still readable as intended.

Adam is a technical writer who specializes in developer documentation and tutorials.