Backgrounds

HTML and CSS provides many ways of changing backgrounds in web pages.

This page explains the industry standard way of creating backgrounds in HTML. Feel free to copy and paste the background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you like.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

HTML Background

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.

Example Code

The source code (on the left) results in the HTML background (on the right).

Source Code	Result
<!-- Codes by HTMLcodes.me --><br /><br /><div style="background:#eee url(http://www.htmlcodes.me/images/backgrounds/background-image-2.gif) repeat fixed;<br />overflow:scroll;<br />width:200px;<br />height:100px;<br />border:1px solid black;"><br /><p><br />This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p><br /><br /><br /></div><br /><br /><br />	This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Source Code

Result

<!-- Codes by HTMLcodes.me --><br /><br /><div style="background:#eee url(http://www.htmlcodes.me/images/backgrounds/background-image-2.gif) repeat fixed;<br />overflow:scroll;<br />width:200px;<br />height:100px;<br />border:1px solid black;"><br /><p><br />This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p><br /><br /><br /></div><br /><br /><br />

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