If you want to add an image to a web page, all you need is HTML. If you want to use an image as a background for a web page, you need both HTML and CSS. HTML stands for Hypertext Markup Language and is code that tells the browser what to display on a web page. CSS stands for Cascading Style Sheets and is used for the appearance and formatting of a web page. You'll need a background image if you'd like to use it for your web page.
Steps
Part 1 of 5: Collecting your files
Step 1. Create a folder for the HTML file and the background image
Create a folder on your computer that you can easily find at a later time.
You can name the folder anything you want, but if you're working with HTML, it's better to give files and folders short, one-word names
Step 2. Put the background image in the HTML code folder
Place the image you want to use as the background in the HTML code folder.
- Simple images with an unobtrusive, repeating pattern are best used as background images so that you can still clearly read the text on the image.
- If you don't have an image, you can download a free background somewhere. Place that image in the folder of HTML code you created.
Step 3. Create an HTML file
Open a text editor and create a new file. Save the file as index.html.
- You can use any text editor you want, even the Windows (Notepad) and Mac OS X (TextEdit) text editors.
- If you want to use a text editor specifically designed for HTML coding, click here to download Atom, a text editor for Windows, Mac OS X, and Linux.
- If you're using TextEdit, click the Format menu and then Make Plain Text, before you start coding in HTML. This setting ensures that the HTML file loads correctly in the web browser.
- Word processors such as Microsoft Word are not suitable for coding in HTML because they add invisible characters and formatting that prevent the HTML file from displaying correctly in a web browser.
Part 2 of 5: Writing the HTML file
Step 1. Copy and paste the default HTML code
Select and copy the HTML code below, then paste it into your open index.html file.
Title of page
Step 2. Add the URL of the background image to it
In the index.html file, look for the line background-image: url(" ");. Place the cursor in the parentheses and then type the file name of the background image. Make sure to include the background image extension.
When you're done, it should look like this:
background-image: url("background.png");
If you use a filename without a path or URL, the web browser will search the web page's folder for the image with that name. If the file is in another folder on your system, you will need to add the full path to that file.
Part 3 of 5: Viewing the HTML file
Step 1. Open the HTML file in a web browser
Right click on the index.html and then open it in the web browser of your choice.
- When your browser opens and you don't see the image, make sure the image filename is spelled correctly in the index.html code.
- When the browser opens and you see HTML code instead of the background image, you have saved the index.html file as a rich text document. Try editing the HTML file in another text editor.
Step 2. Edit the HTML file
In the text editor, place the cursor between the tags and type Hello world!. Reload the browser window to see the text on top of the background image.
Part 4 of 5: The HTML code explained
Step 1. HTML and CSS tags
HTML code consists of open and close tags. The tag is the open body tag, and is the closing body tag. Every open tag on an HTML page also needs a close tag to render the page correctly.
Step 2. The DOCTYPE tag
Every HTML page should start with a. This tells the web browser that it is an HTML file.
Step 3. Edit the HTML file
In the text editor, place the cursor between the tags and type "Hello world! Reload the browser window to see the text on top of the background image.
Step 4. HTML and CSS Tags
HTML code consists of open and close tags. The tag is the open body tag, and is the closing body tag. Every open tag on an HTML page also needs a close tag to render the page correctly.
Step 5. The title tag
The tag is text that appears in the title bar of your browser window, next to text that appears in a browser tab.
Step 6. The style tag
The tag indicates that CSS will follow. Everything between the tags is CSS code.
Step 7. The body tag
Any text placed between the tags will be displayed as plain text, unless it is HTML or CSS code.
Step 8. Edit the HTML file
In the text editor, place the cursor between the tags and type "Hello world!" there. Reload the browser window to see the text on top of the background image.
Part 5 of 5: The CSS code explained
Step 1. Understand the CSS code
In your index.HTML code, CSS code between the tags tells the web browser to add a background image with a specific name to the tag when the web page is generated.
Step 2. Check out the CSS code
Step 3.
body { background-image: url("background.png"); }
Step 4. What parts does CSS code consist of
CSS styles consist of two parts, the selector and the declaration.
In the example, body is the selector and
background-image: url("background.png") is the declaration.
A selector can be any HTML tag.
Declarations are always enclosed in braces { }.
Step 5. What is a CSS declaration
The CSS declaration consists of two parts, the property and the value. Between the braces, background-image is the property (property) and url("background.png") is the value (value).
The property specifies what is poured into a style, and the value specifies how much a style is applied to that property.
The property and the value are always separated by a colon.
CSS declarations always end with a semicolon.