Video:Add a Background Image to a Webpagewith Don Schechter
Want to give your website a unique and personalized look? Learn how to add a background image to your webpage.See Transcript
Transcript:Add a Background Image to a WebpageHi, I'm Don Schechter for About.com Computing. Today I'll show you how to add an image as your background in HTML for your website
Use CSS to Add the BackgroundFirst open Notepad, or if you're on a Mac, use Simple Text. Using Cascading Style Sheets, or CSS, you can place an image in the background of your webpage. You can have it move when you scroll or stay stationary behind your text.
Save Your Files in the Same FolderFirst make sure the picture you want to use is saved in the same folder as your CSS and HTML file. This will make it easier to put into your CSS file.
Open the CSS DocumentOpen Notepad if you're using a PC, or Simple Text on a Mac. I'm going to open a previously saved CSS document by going to 'open' and changing the files of type to 'all files'. Click 'open'
Code the Background ImageTo put an image as background, type within braces: background-image: url parenthesis quote the location of the image relative to your css file and file type, the end quote, parenthesis, semicolon. url( nameofphoto.(dot)typeofpic );
Identify the Image TypeIf you're not sure what type of picture you have, find it and go to 'properties.' If you're going to use a picture as a background image, as a general rule, use the GIF format with graphics that you have created on your computer such as horizontal rules, buttons, or animation.
Use the Jpeg format when the images are scanned pictures or photographs.
Link the CSS File in the HTML File
The href shows the location of your CSS file, called style. It's simpler if your CSS file and HTML file are located in the same directory.
You will notice when you open your html file in your browser the image is repeated horizontally and vertically on the entire page by default.
Thanks for watching. For more information, visit us online at computing.about.com.