FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.

HTML Background Code

Related:
• Free Background Patterns
• Stretch Background Image
• 'background' property
• Background Music
• HTML Codes
• HTML Color Chart

This article provides HTML background code - code for setting the background properties of an HTML element.

The following examples use Cascading Style Sheets (CSS). CSS is the best way of setting the background properties in your HTML. It's more flexible than the (outdated) HTML method (more on that below). Using CSS, you can set the background properties of any HTML element. Plus you can do things like, specify an image's position, whether it should repeat, how it should repeat etc.

Background Color

You can set the background color of any HTML element using the background-color property. You can choose a background color with the HTML color chart.

Code:

<!-- Codes by Quackit.com -->
<div style="background-color:yellow;width:200px;">
<p>HTML background code is limited, CSS background code is much better!</p>
</div>
<p><a href="http://www.quackit.com/html/codes/color/">HTML color</a></p>

Result:

HTML background code is limited, CSS background code is much better!

Choose a color with the HTML color chart.

Background Image

You can set a background image using the background-image property.

Using the code below, you need to change /pix/smile.gif to the location of your background image. If you need a background image, check out these free background patterns.

Code:

<div style="background-image:url(/pix/smile.gif);
	background-repeat:repeat;
	width:200px;
	height:200px;">
<p>HTML background code is limited, CSS background code is much better!</p>
</div>
<p><a style="font-size:10px;" href="http://www.quackit.com/web_graphics/free_website_graphics/free_website_background_patterns.cfm">Background Patterns</a></p>

Result:

HTML background code is limited, CSS background code is much better!

Fixed Background Image

You can fix the position of a background image so that its position is fixed even if its containing block scrolls. You do this with the background-attachment property. Once again, you need to change /pix/smile.gif to the location of your background image.

<div style="background-image:url(/pix/smile.gif);
	background-repeat:repeat;
	background-attachment:fixed;
	overflow:scroll;
	width:200px;
	height:100px;">
<p>HTML background code is limited, CSS background code is much better!
example shows how a background image can be set to a fixed position
- even though its containing block scrolls.</p>
</div>
<p><a style="font-size:10px;" href="http://www.quackit.com/web_graphics/free_website_graphics/free_website_background_patterns.cfm">Website Backgrounds</a></p>

This results in:

HTML background code is limited, CSS background code is much better! example shows how a background image can be set to a fixed position - even though its containing block scrolls.

Shorthand Background Code

You can use the CSS background property to set all the background properties at once. Therefore, you can set background-attachment, background-color, background-image, background-position, background-repeat all in one place using the background property.

Therefore, using the previous code example, we could rewrite it to this:

<div style="background:url(/pix/smile.gif) repeat fixed;
		overflow:scroll;
		width:200px;
		height:100px;">
<p>HTML background code is limited, CSS background code is much better!
example shows how a background image can be set to a fixed position
- even though its containing block scrolls.</p>
</div>
<p><a style="font-size:10px;" href="http://www.quackit.com/web_graphics/free_website_graphics/free_website_background_patterns.cfm">Background Patterns</a></p>

HTML background code is limited, CSS background code is much better! example shows how a background image can be set to a fixed position - even though its containing block scrolls.

Backgrounds for the Whole Page

To set the background properties for the whole page, simply apply the property/properties to the body element.


<html>
<head>
</head>
<body style="background-color:#eeeeee;">
...content goes here...
</body>

Backgrounds for your Whole Website

To apply background properties to your whole website, you should place the background code into an external style sheet.

Doing this will save you from having to copy/paste the code on to multiple pages. External style sheets enable you to write the code once, then apply it to your whole site (regardless of how many pages you have).

Oh, and external style sheets are extremely easy to create!

Full List of Background Properties

Here's a list of CSS background properties you can use on your HTML elements:

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

HTML Background Code (deprecated)

The above examples demonstrate the best way of setting the background of your web pages - using CSS.

You may occasionally encounter an old web page where the background has been set using HTML (instead of CSS). Something like this:


<body background="/images/image_name.gif" bgcolor="orange">

This is the old way of specifying background. Until CSS came along, this was the only way to set background properties in HTML. HTML is very limited for setting backgrounds. You can only specify a background image on one tag (the body tag), and setting a background color is limted to the document's body and tables.

This method of specifying the background is deprecated (i.e. not recommended) - you should use the CSS methods above to set background properties.

Enjoy this website?

Add this page to your Favorites
Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/html_background_codes.cfm">HTML Background Code</a> from Quackit.com
Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

Need Website Content?
Get unique, quality digital content for your website.

270+ Website Templates
800+ Flash Templates
25,000+ Images, Logos
30,000+ e-Books
15,000+ Scripts
27,000+ Animated GIFs
21,000+ Ringtones
...and much more!

Get your content now!

HTML

HTML Background Code

Background Color

Background Image

Fixed Background Image

Shorthand Background Code

Backgrounds for the Whole Page

Backgrounds for your Whole Website

Full List of Background Properties

HTML Background Code (deprecated)

Enjoy this website?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING