HTML Background Code

This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Shorthand Background Code

The quickest HTML code for backgrounds is the background property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background property is a shorthand property for setting all background properties at once.

Source CodeResult

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.

Example:

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Choose a color with the HTML color picker.

Source CodeResult

This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source CodeResult
This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source CodeResult

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

About the HTML Codes

The HTML code on this page is provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

External Style Sheets

Most of the HTML codes on this website use inline CSS. If you intend to use the codes across your whole website, you should place the CSS into an external style sheet.

To learn more, check out this explanation of external style sheets.

Web Hosting

Our partner site, ZappyHost, is a professional web hosting company providing website hosting, domain names and related products. If you need web hosting, check them out!