Page Title

If you want to add an image to a web page, all you need is HTML. If you'd like to set an image as a background to a web page, you'll need both HTML and CSS. HTML stands for Hypertext Markup Language and is code that tells a browser what to show on a web page.[1] CSS stands for Cascading Style Sheets and is used to change the appearance and layout of a web page.[2] You'll need a background image that you'd like to use for your web page. Part 1 Setting Up Your Files Image titled 2627945 1 11 Create a folder to hold your HTML file and background image. On your computer, create and name a folder that you can easily find later. You can name the folder anything you like, but when working with HTML, it's best to get in the habit of naming files and folders with short, single word names. Image titled 2627945 2 12 Put the background image into the HTML folder. Put the image you'd like to use as background into the HTML folder. Simple images, with light, repetitive patterns are best to use for background images so that you can read any text on top of the background image. If you don't have an image, you can download a free background image. If you download an image, put it in the HTML folder you created. Image titled 2627945 3 13 Create an HTML file. Open a text editor, and then create a new file. Save the file as index.html. You can use any text editor you want, even the system text editors provided by Windows, Notepad, and Mac OS X, TextEdit. If you want to use a text editor intended for working with HTML, click here to download Atom, a text editor that works on Windows, Mac OS X, and Linux operating systems. If you're using TextEdit, before starting to write the HTML file, click the Format menu, and then click Make Plain Text. This setting will make sure the HTML file loads properly in a web browser. Word processors, such as Microsoft Word, are not great for writing HTML, because they add invisible characters and formatting that can break an HTML file so that it doesn't display correctly in a web browser. Part 2 Writing the HTML File Image titled 2627945 4 11 Copy and paste the standard HTML code. Select and copy the HTML code below, and then paste it into your open index.html file. Page Title Image titled 2627945 5 12 Add the background image URL. In the index.html file, find the line background-image: url(" ");. Move the cursor between the parentheses, and then type the background image file name. Make sure to include the background image file extension. When you're done, it should look like: background-image: url("background.png"); When you use a filename without a file path or URL, the web browser will look in the web page folder for the named image. If the file is in another folder on your file system, you'll need to add the full path to that file.[3] Image titled 2627945 6 13 Save the HTML file. Part 3 Reviewing the HTML File Image titled 2627945 7 11 Open the HTML file in a web browser. Right-click the index.html file, and then open it in the web browser of your choice. When the browser opens, if you don't see the image, make sure the image file name is spelled correctly in the index.html text editor window. When the browser opens, if you see HTML code instead of the background image, your index.html file was saved as a rich text document. You may want to try editing the HTML file in a different text editor. Image titled 2627945 8 12 Make edits to the HTML file. In the text editor window, move the cursor between the tags, and then type Hello world!. Reload the browser window to see the text on top of the background image. Part 4 Understanding the HTML Code Image titled 2627945 9 11 Understand HTML and CSS tags. HTML code is made up of open and closed tags. The tag is the open body tag, and is the closed body tag. Every open tag on an HTML page needs to have a closing tag for the page to display correctly. Image titled 2627945 10 12 Understand the DOCTYPE tag. Every well-written HTML page should start with . This tells a web browser that the HTML file is an HTML file. Image titled 2627945 11 13 Make edits to the HTML file. In the text editor window, move the cursor between the tags, and then type Hello world! . Reload the browser window to see the text on top of the background image. Image titled 2627945 12 14 Understand HTML and CSS tags. HTML code is made up of open and closed tags. The tag is the open body tag, and is the closed body tag. Every open tag on an HTML page needs to have a closing tag for the page to display correctly. Image titled 2627945 13 15 Understand the title tag. The tag is text that appears in the title bar of your browser window, as well as the text that shows in a browser tab. Image titled 2627945 14 16 Understand the style tag. The <style> tag flags CSS content. Everything between the <style> tags is CSS code. Image titled 2627945 15 17 Understand the body tag. Any text written between the <body> tags will appear as written, unless it's HTML or CSS code. Image titled 2627945 16 18 Make edits to the HTML file. In the text editor window, move the cursor between the <body> </body> tags, and then type "Hello world!". Reload the browser window to see the text on top of the background image. Part 5 Understanding the CSS Code Image titled 2627945 17 11 Understand the CSS code. In your index.html code, the CSS code between the <style> tags tells the web browser to add a background image with a specific name to the <body> tag when the web page renders. Image titled 2627945 18 12 Review the CSS code. body { background-image: url("background.png"); } Image titled 2627945 19 13 Understand the parts of the CSS code. CSS styles are made up of two parts, the selector and the declaration.[4] In the example, body is the selector and background-image: url("background.png") is the declaration. A selector can be any HTML tag. Declarations always go between curly braces { }. Image titled 2627945 204 Understand the CSS declaration. The CSS declaration is made up of two parts, the property and the value. Between the curly braces, background-image is the property and url("background.png") is the value.[5] The property describes what is being styled and the value describes how the property is styled. The property and value are always separated by a colon :. CSS declarations always end in semicolons ;.