HTML Background Image Code

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

Perhaps 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.

HTML method (deprecated)

To set a background image for your page in HTML, do something like this:

CSS method (recommended)

As mentioned, CSS is more powerful for setting background images. You can set a background image for any element, plus you can specify its position, whether it should repeat, how it should repeat etc.

To set a background image using CSS, prevent it from repeating, and position it in the center of the page, do something like this and place it in between the document's head tags:

<style>
  body {
  background-image: url("/images/image_name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
</style>

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

<style>
  body { background: url("/images/image_name.gif") 50% 50% no-repeat; }
</style>