How To Add A Background Image To My Website

Download Article

The background is one of the nearly crucial elements of a website. A proficient background creates the tone for the website and complements the content. At that place are many unlike ways to add a background, each style with a different purpose. Some methods allow y'all to apply the background to all the pages in a website, while others limit the background to only a certain folio. This article teaches y'all how to add together a groundwork to your website using HTML or CSS.

Solid Colored Background Download Article

i

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

Open up your web code (source).

Advertizing
three
In the body tag, add together an attribute chosen bgcolor. Now, you body tag should look like this-
<body bgcolor="COLORNAME"> where COLORNAME is the proper noun of the color. COLORNAME tin can exist filled with many types of color representatives-
- <torso bgcolor="red">(color name)
- <torso bgcolor="#FF0000">(hex value)
- <body bgcolor="rgb(255, 8, nine)">(RGB value)
4

Experimenting with RGB and # can lead to many shades, but you can take the easy first style. Merely remember that typing an uncommon color as "Ultramarine Blueish Light-green" volition effect in white.

Advertizing

Adding a Groundwork Epitome Download Article

Calculation a background epitome is slightly more complicated than a solid colored background.

one
Add the background belongings to the trunk tag, so it looks like this-
<body background="SRC">
where SRC is the source of the image SRC can be in the same folder,or another folder/webpage.
- <body background="cerise.gif">(in same folder)
- <body background="\Folder1\ruby.gif">(inside a different binder)
- <body background="imagepage1/red.gif">(in a different webpage)
2

Think to type the .gif/ .jpeg /.bmp extension.

Solid Colored Background Download Article

1

To add a solid colored background in CSS, add a style attribute. You lot can also requite IDs and Classes and utilize both external and internal stylesheets.
2
Your torso tag should look like this-
- <body style="background-color: COLORNAME;">
  where the COLORNAME is the proper noun of the color, hex value or RGB(Also recall the last steps of the solid colored background in HTML, the are applicative hither too) .

Adding an Image Download Article

1

To add together an prototype, add the style attribute to the body tag. You can as well give IDs and Classes and use both external and internal stylesheets.
two
Your trunk tag should at present wait like this-
- <body mode="background-image:url('SRC'); ">
3
Call up that SRC is the source. It tin be from the same folder, dissimilar folder or a different web page.
- <body style="background-epitome:red.gif;">(in same folder)
- <body style="background-image:\Folder1\reddish.gif">(inside a different folder)
- <body way="background-image:imagepage1/reddish.gif">(in a different web page).
iv

Remember to add the .extensions too.

Advert

Repeating Patterned Background Download Article

1
To make a repeated pattern groundwork, add together a background as said in the steps above. Your body tag must be at present changed to-
<torso way="background-image: url('SRC'); groundwork-repeat:REPEAT-SETTINGS; "> Where REPEAT-SETTINGS are the settings. There can be many repeat settings, like-
- <body fashion="background-epitome: red.gif; background-repeat: repeat;">(The background will repeat both vertically and horizontally.)
- <body manner="background-image: red.gif; background-echo: repeat-x;">(The groundwork will repeat horizontally.)
- <body style="background-image: scarlet.gif; background-echo: repeat-y;">(The groundwork volition repeat vertically.)

Stock-still Image Groundwork Download Commodity

ane
Fixed paradigm backgrounds look absurd and do not change as you ringlet downwards. To do them you just demand to practice some elementary tweaks to the code in the to a higher place section. Practice the tweaks to make the body tag look similar this-
- <torso manner="background-image:url('SRC'); background-attachment:fixed; groundwork-position:POSITION; background-repeat:Repeat SETTINGS;">
  where SRC is the source of the background image, POSITION is the position of the prototype(it can range from heart to top-right); background-attachment is the main "catalyst" of this background type. It is used to tell the position of the background and information technology is recommended that information technology should non be inverse.

Add New Question

Question

How do I add together an image to HTML?

Sapphire Games

Customs Reply

Left-click the background, click ''Add Epitome?'' and click yes, Choose image from the selection shown or upload your own.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Read the entire article: the section left out may have some important tips(as this commodity's sections are in reference to each other and written assuming that the sections are all read).

Thanks for submitting a tip for review!