Buzz
To add an image to a website, all you need is HTML code. However, if you want to set an image as the background of a webpage, you’ll need both HTML and CSS. HTML, which stands for Hypertext Markup Language, is a code that tells the browser what to display on a webpage. CSS, or Cascading Style Sheets, is used to alter the appearance and layout of a webpage. You’ll also need an image to use as the background for your website.
Steps
Prepare the File
Create a folder to store your HTML file and background image. On your computer, create and name a folder that you can easily locate later.
- You can name the folder anything you like, but when working with HTML, it’s best to get into the habit of naming files and folders with short, concise words.
Save the background image to the HTML folder. Store the image you want to use as the background in the HTML folder.
- If you're not concerned about your website loading slowly on outdated devices or slow connections, consider using a high-resolution image for the background. Simple images with light colors and repeating patterns are also great choices for backgrounds, ensuring users can easily read any text displayed over them.
- If you don’t have a background image ready, you can download one for free. After downloading, move the image to the HTML folder you created.
Create an HTML file. Open a text editor and create a new file. Save the file with a .html extension.
- You can use any text editor, including pre-installed system programs like Notepad (on Windows) or TextEdit (on Mac OS X).
- If you prefer a dedicated HTML editor, click here to download Atom, a text editor that works on Windows, Mac OS X, and Linux.
- If you’re using TextEdit, before writing the HTML file, click the Format menu and select Make Plain Text. This ensures the HTML file executes correctly in a web browser.
- Word processors (such as Microsoft Word) are not suitable for writing HTML, as they add hidden characters and formatting that can corrupt the HTML file structure, causing content to display incorrectly in web browsers.
Write the HTML File
and paste the standard HTML code. Select and copy the code below, then paste it into the HTML file you created (in this example, index.html).
<!DOCTYPE html><html><head><title>Page Title</title><style>body {background-image: url(" ");} </style></head><body></body></html>
Add the background image path. In index.html, locate the line background-image: url(" ");. Place your cursor between the parentheses and type the name of the image file you want to use as the background. Don’t forget to include the file extension (in this example, “background.png”).
- Once completed, the code will look like this:
background-image: url("background.png");
- If you use the file name without specifying a file path or URL, the web browser will search for the image in the website's folder. If the image is located in a different directory, you must include the full file path.
Review the HTML File
Open the HTML file in a web browser. Right-click on index.html and open it with your preferred web browser.
- If the image doesn’t appear when the browser opens, double-check that the image file name is correctly entered in the index.html editor.
- If you see the HTML code instead of the background image, the index.html file might have been saved as an RTF (rich text document). In this case, try editing the HTML file in a different text editor.
Edit the HTML file. In the text editor, place your cursor between the <body> </body> tags and type any content, such as Hello!. Refresh the browser window, and you’ll see the text displayed over the background image.
Understanding HTML Code
Learn about HTML and CSS tags. HTML code is built using opening and closing tags. The <body> tag opens the main content section, and </body> closes it. Every opening tag on an HTML page must be properly closed for the page to display correctly.
Understand the DOCTYPE tag. Every properly written HTML page must start with the <!DOCTYPE html> tag. This tag informs the web browser that it is working with an HTML file.
Edit the HTML file. In the text editor, place your cursor between the <body> </body> tags and type any content, such as Hello!. Refresh the browser window, and you’ll see the text displayed over the background image.
Understand HTML and CSS tags. HTML code consists of opening and closing tags. The <body> tag opens the main content section, and </body> closes it. Every opening tag on an HTML page must be properly closed for the page to display correctly.
Understand the title tag. The <title> tag displays text on the browser's title bar and at the top of the tab.
Learn about the style tag. The <style> tag marks CSS content. Everything between the <style> tags is considered CSS code.
Understand the body tag. Any content written between the <body> tags will appear as text unless it is HTML or CSS code.
Edit the HTML file. In the text editor, place your cursor between the <body> </body> tags and type any content, such as Hello!. Refresh the browser window, and you’ll see the text displayed over the background image.
Understanding CSS Code
Understand CSS code. In the index.html file, the CSS code is placed between the <style> tags and instructs the browser to add a background image with a specific name within the <body> tag when the webpage is displayed.
Review the CSS code.
Learn about CSS rules. CSS rules consist of two parts: a selector and a declaration.
- In this 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 curly braces { }.
Understand CSS declarations. A CSS declaration has two parts: a property and a value. Inside the curly braces,
background-image is the property, and url("background.png") is the value.
background-image is the property, and url("background.png") is the value.
- The property describes what is being styled, and the value specifies how the property is styled.
- The property and value are always separated by a colon :.
- CSS declarations always end with a semicolon ;.
