HTML Background Code
This article provides code for setting the background properties of an HTML element.
These examples use Cascading Style Sheets (CSS). 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.
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/samples/bg1.gif
to the location of your background image. If you need a background image, check out these free background patterns.
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/samples/bg1.gif
to the location of your background image.
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:
Backgrounds for the Whole Page
To set the background properties for the whole page, simply apply the property/properties to the body
element.
Backgrounds for the Whole Site
The examples on this page use inline styles, which means that the CSS is attached to each HTML element within the HTML code. It's a good idea to transfer these to an external style sheet if you need to use the same styles throughout your website.
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).
Background Gradients
CSS3 enables you to create that "background gradient" effect. This is where you can make different colors blend together nicely across an HTML element.
Before CSS3, in order to create a gradient, you had to create an image, upload it to your server, then use the method described above (under the "Background Image" heading).
With the introduction of gradients to CSS3, gradients are a breeze to create.
To create a background gradient, check out these pages:
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
The following properties were introduced in CSS level 3.