Summary:

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: http://www.tizag.com/htmlT/htmlcolorcodes.php