HTML Style Background Attachment Property

In HTML Attributes

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.

Contents [hide]

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.

HTML Style Background Attachment Property

Use CSS instead

The CSS background- properties

Setting a background-color

Setting a background-image

background-image