HTML Background Image Code

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

In HTML, background images are set using CSS. 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

Here, we apply a background image to a <div> element.

<div style="background-image:url('/pix/samples/bg1.gif');padding:5px;width:150px;height:200px;border:1px solid black;">
<p>See the background image?</p>
</div>

No-Repeat

Here, we set the background image to background-repeat:no-repeat. This prevents the image repeating across the element (in the event that the image is smaller than the element). You can also use repeat-x and repeat-y to make the background repeat only horizontally or vertically. For more info, see the CSS background-repeat property.

<div style="background-image:url('/pix/samples/bg1.gif');padding:5px;width:150px;height:200px;border:1px solid black;background-repeat:no-repeat;">
<p>The background image doesn't repeat.</p>
</div>

Whole Page

The following code 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.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- Styles -->	
<style>
body {
  background-image: url("/pix/samples/bg1.gif");
  background-position: 50% 50%;
  background-repeat: repeat;
}
</style>
</head>
<body>

<!-- HTML -->
<h3>Whole Page</h3>
<p>This example has a background image applied to the <code>body</code> element.</p>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- Styles -->	
<style>
body {
  background-image: url("/pix/samples/bg1.gif");
  background-position: 50% 50%;
  background-repeat: repeat;
}
</style>
</head>
<body>

<!-- HTML -->
<h3>Whole Page</h3>
<p>This example has a background image applied to the <code>body</code> element.</p>

</body>
</html>

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

The following properties were introduced in CSS level 3.

Web.QHMIT.com