Add a background image to HTML: 13 steps (with images)

Table of contents:

Add a background image to HTML: 13 steps (with images)
Add a background image to HTML: 13 steps (with images)
Anonim

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

2627945 1 1

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

2627945 2 1

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.
2627945 3 1

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

2627945 4 1

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     
2627945 5 1

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.

  • Save the HTML file.

    2627945 6 1
  • Part 3 of 5: Viewing the HTML file

    2627945 7 1

    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.
    2627945 8 1

    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

    2627945 9 1

    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.

    2627945 10 1

    Step 2. The DOCTYPE tag

    Every HTML page should start with a. This tells the web browser that it is an HTML file.

    2627945 11 1

    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.

    2627945 12 1

    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.

    2627945 13 1

    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.

    2627945 14 1

    Step 6. The style tag

    The tag indicates that CSS will follow. Everything between the tags is CSS code.

    2627945 15 1

    Step 7. The body tag

    Any text placed between the tags will be displayed as plain text, unless it is HTML or CSS code.

    2627945 16 1

    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

    2627945 17 1

    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.

    2627945 18 1

    Step 2. Check out the CSS code

    Step 3.

    body { background-image: url("background.png"); }

    2627945 19 1

    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 { }.

    2627945 20

    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.

    Popular by topic