HTML Background Image Code

This article provides HTML background image code - code for setting a background image on an HTML element.

More importantly, it also provides the CSS code for a background image. The CSS method is recommended as it is more powerful, besides, the HTML method is deprecated.

CSS allows you to set a background image for any HTML element. Plus you can specify its position, whether it should repeat across the page, how it should repeat etc.

Background Image Example

The following example specifies a background image for the whole page (via the 'body' tag). We position the image in the center of the page and prevent it from repeating across the page.

body {
  background-image: url("http://yoursite.com/images/image_name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

Even better, you can use the CSS background property to set all the background properties at once. Therefore, we could rewrite the above code to this:

body {
  background: url("http://yoursite.com/images/image_name.gif") 50% 50% no-repeat;
}

Where Do I Put the Code?

To apply the background image to every page on your website, put the code into an external style sheet.

If you want the background image to appear on a single page only, surround the code by style tags, and place between the document's head tags.

More Background Properties

Here are more background codes and usage examples.

Also, here's a full list of CSS background properties you can apply to your HTML elements:

• background (shorthand for all background properties)
• background-attachment
• background-color
• background-image
• background-position
• background-repeat

HTML Method (not recommended)

You may occasionally see an old web page with code similar to this:

This is the old way of specifying a background image in HTML, and is now deprecated (outdated and not recommended) by the W3C. Instead of using this method, you should use the CSS method as described above.