Set a Background Image in HTML

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.

Steps

Setting Up Your Files

  1. 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.
  2. Put the background image into the HTML folder. Put the image you'd like to use as background into the HTML folder.
    • If you aren't too concerned with ensuring your website will run well on older devices with slower internet connections, you should be safe in using a higher resolution image as your background. Simple images with light, repetitive patterns are also a good choice when deciding on a background image so that you can read any text on top of it.
    • 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.
  3. 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.

Writing the HTML File

  1. Copy and paste the standard HTML code. Select and copy the HTML code below, and then paste it into your open index.html file.
  2. 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]
  • Save the HTML file.

    • Reviewing the HTML File

    1. 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.
    2. 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.

    Understanding the HTML Code

    1. Understand HTML and CSS tags. HTML code is made up of open and closed tags. The <body> tag is the open body tag, and </body> is the closed body tag. Every open tag on an HTML page needs to have a closing tag for the page to display correctly.
    2. Understand the DOCTYPE tag. Every well-written HTML page should start with <!DOCTYPE html>. This tells a web browser that the HTML file is an HTML file.
    3. 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.
    4. Understand HTML and CSS tags. HTML code is made up of open and closed tags. The <body> tag is the open body tag, and </body> is the closed body tag. Every open tag on an HTML page needs to have a closing tag for the page to display correctly.
    5. Understand the title tag. The <title> tag is text that appears in the title bar of your browser window, as well as the text that shows in a browser tab.
    6. Understand the style tag. The <style> tag flags CSS content. Everything between the <style> tags is CSS code.
    7. Understand the body tag. Any text written between the <body> tags will appear as written, unless it's HTML or CSS code.
    8. 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.

    Understanding the CSS Code

    1. 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.
    2. Review the CSS code.

    3. 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 { }.
    4. 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 ;.

    Sources and Citations

    1. ↑ http://www.w3schools.com/html/html_intro.asp
    2. ↑ http://www.w3schools.com/css/css_intro.asp
    3. ↑ http://www.w3schools.com/html/html_images.asp
    4. ↑ http://www.w3schools.com/css/css_syntax.asp
    5. ↑ http://www.w3schools.com/css/css_background.asp

    You may like

    Retrieved from "https://kipkis.com/index.php?title=Set_a_Background_Image_in_HTML&oldid=265722"