Add a Background to a Webpage - Website Background Image in HTML and CSS Video
  1. Tech

Your suggestion is on its way!

An email with a link to:

was emailed to:

Thanks for sharing with others!

Video:Add a Background Image to a Webpage

with 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 Webpage

Hi, I'm Don Schechter for Computing. Today I'll show you how to add an image as your background in HTML for your website

Use CSS to Add the Background

First 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 Folder

First 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 Document

Open 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 Image

To 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 Type

If 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
About videos are made available on an "as is" basis, subject to the User Agreement.

©2015 All rights reserved.