Background Images and Colors using HTML
● Learn how to add background images and colors to a <div> tag.
✓ <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 "
Step #13: View Your Work ~
✓ Save your page by hitting the keyboard shortcut: Cmd(⌘)+S check out your color in your preferred browser!
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.
Step #15: HEX Code ~
✓ Paste the hex number including the #
✓ 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.
✓ Attach the .zip file with the completed steps and continue working …
Other Resources: http://www.tizag.com/htmlT/htmlcolorcodes.php