The background is one of the most crucial elements of a website. A good background creates the tone for the website and complements the content. There are many different ways to add a background, each way with a different purpose. Some methods allow you to apply the background to all the pages in a website, while others limit the background to only a certain page. This article teaches you how to add a background to your website using HTML or CSS.

http://d5kh2btv85w9n.cloudfront.net/1/1f/Add a Background to a Website Step 1.360p.mp4

1

A solid colored background is the most basic type of background that you can put on a website. In fact, every website begins with a default white background. However, while a white background can be very sleek and clean looking when used with a harmonious color scheme, a different colored background may be favored with different themes.

http://d5kh2btv85w9n.cloudfront.net/f/fb/Add a Background to a Website Step 3.360p.mp4

3

In the body tag, add an attribute called bgcolor. Now, you body tag should look like this-<body bgcolor="COLORNAME">
where COLORNAME is the name of the color. COLORNAME can be filled with many types of color representatives-

http://d5kh2btv85w9n.cloudfront.net/d/d2/Add a Background to a Website Step 8.360p.mp4

<body style="background-color: COLORNAME;">
where the COLORNAME is the name of the color, hex value or RGB(Also remember the last steps of the solid colored background in HTML, the are applicable here too) .

http://d5kh2btv85w9n.cloudfront.net/3/36/Add a Background to a Website Step 11.360p.mp4

3

Remember that SRC is the source. It can be from the same folder, different folder or a different web page.

<body style="background-image:red.gif;">(in same folder)

<body style="background-image:\Folder1\red.gif">(inside a different folder)

<body style="background-image:imagepage1/red.gif">(in a different web page).

4

Remember to add the .extensions too.

Ad

Repeating Patterned Background

1

To make a repeated pattern background, add a background as said in the steps above. Your body tag must be now changed to-<body style="background-image: url('SRC'); background-repeat:REPEAT-SETTINGS; "> Where REPEAT-SETTINGS are the settings. There can be many repeat settings, like-

Fixed Image Background

1

Fixed image backgrounds look cool and do not change as you scroll down. To do them you just need to do some simple tweaks to the code in the above section. Do the tweaks to make the body tag look like this-

<body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;">
where SRC is the source of the background image, POSITION is the position of the image(it can range from center to top-right); background-attachment is the main "catalyst" of this background type. It is used to tell the position of the background and it is recommended that it should not be changed.

Ad

We could really use your help!

Can you tell us aboutpregnancy?

Yes

No

pregnancy

how to help a teen mother prepare for a baby

Can you tell us abouthorses?

Yes

No

horses

how to identify an Appaloosa horse

Can you tell us aboutmaking money through chores?

Yes

No

making money through chores

how to make money through chores

Can you tell us aboutfashion?

Yes

No

fashion

how to find Spring fashion

Thanks for helping! Please tell us everything you know about

...

Tell us everything you know here. Remember, more detail is better.

Tips

Provide Details.

Please be as detailed as possible in your explanation. Don't worry about formatting! We'll take care of it.
For example:Don't say: Eat more fats.Do say: Add fats with some nutritional value to the foods you already eat. Try olive oil, butter, avocado, and mayonnaise.