Background Images and Colors using HTML

    ●   Learn how to add background images and colors to a <div> tag.

Learn About:

<div> tags Repeating Backgrounds <style> tags
hex color codes in HTML

  •   This tutorial is part of the Fan-Tasitic Project.

This background is an example of work inspired by this tutorial.

Take a look!

Step #1: Find and Image for your Background ~

Search the internet for background textures - find one you want for your web page …

Step #2: Save the Image ~

When you find something you like, Right-Click it and save it IN THE ROOT FOLDER of your project.

Remember: Everything must be saved IN THE ROOT FOLDER of your project or it wont work!

Step #3: Body Tag ~

Open your index.html page and look for the <body> tag …




You may already have style code on the body tag from a previous tutorial.




If so, you can add codes to the existing style, no problem.


Step #4: Body Tag ~

If you have styles on the body tag already, you can always add to existing styles:

Put url() at the end:

Step #5: Copy the Name of the Background File ~

Copy the name of the background file you saved to your Web Page folder:

Add a link to the image like this:

Step #6: Readability ~

Many backgrounds interfere with the readability of your text.




Create a <div> below your first <body> tag …


Step #7: Bottom Tag ~

Now scroll down to the last </body> tag and add a closing </div> tag above it …

Now you have <div> </div> tags surrounding your content.

Step #7: Add a Style to the div ~

Scroll back to the top and add a style tag to your div:

Step #8: Add a Style to the div ~

Then add width:800px between " "

Step #9: Height ~

Then add a semi-colon ;

Add height:1000px

Step #10: Margin auto ~

Then add ANOTHER semi-colon ; and add margin : auto

Step #11: background-color ~

Lastly, add a semi-colon ; and add background-color :

Leave it like that for a moment, and …

Step #12: Choose your Colors ~

Now, pick a color from the following HTML Basic Colors list:

Type your color before the last "

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #13: View Your Work ~

Save your page by hitting the keyboard shortcut: Cmd()+S check out your color in your preferred browser!

lime background

Step #14: HTML Colors ~

Unfortunately Red, Green, Blue - not much to choose from! However, there are MILLIONS of other colors available.

Search the internet for background colors in HTML to find a unique color, and copy the Hex Code.

hex code

Step #15: HEX Code ~

Paste the hex number including the #

body bgcolor hex

Using hex numbers give you MILLIONS of choices instead of just a few!

Last Step: Save, Compress and Attach your Site ~

Right-Click the root folder of your site, and compress it.

right click root folder

Attach the .zip file with the completed steps and continue working …

zip file

Other Resources: