How to Insert Background Image in HTML from Local Folder Using Notepad

Adding a background image to your HTML page from a local folder using Notepad involves writing HTML and CSS code directly into a text file and saving it with an .html extension. As shown in the reference, you will target the <body> tag to apply the background image to the entire page using CSS.

Here's how to do it:

To insert a background image from a local folder, you'll use CSS within your HTML document. The most common method is to place CSS rules inside a <style> tag within the <head> section of your HTML. This CSS will then apply to the elements specified, such as the <body>.

1. Open Notepad and Start Your HTML Structure

Begin by opening Notepad and creating a basic HTML document structure.

<!DOCTYPE html>
<html>
<head>
    <title>My Background Image Page</title>
    <!-- CSS goes here -->
</head>
<body>

    <!-- Page content goes here -->
    <h1>Welcome!</h1>
    <p>This page has a background image.</p>

</body>
</html>

2. Add CSS to Target the Body

Inside the <head> section, add a <style> tag. Within this tag, you will write CSS rules to target the <body> element, as highlighted in the reference. This rule will set the background image.

<!DOCTYPE html>
<html>
<head>
    <title>My Background Image Page</title>
    <style>
        body {
            /* Background image properties will go here */
        }
    </style>
</head>
<body>

    <h1>Welcome!</h1>
    <p>This page has a background image.</p>

</body>
</html>

3. Specify the Local Image Path

Within the body { ... } CSS rule, use the background-image property and the url() function to specify the path to your local image file. The path is relative to the location of your HTML file.

Image in the same folder as the HTML file:
```
body {
    background-image: url('your-image-name.jpg'); /* Or .png, .gif, etc. */
}
```
Replace 'your-image-name.jpg' with the exact name and extension of your image file.
Image in a subfolder (e.g., images folder):
```
body {
    background-image: url('images/your-image-name.jpg');
}
```
Replace 'images' with the name of your subfolder.
Image in a folder one level up from the HTML file:
```
body {
    background-image: url('../your-image-name.jpg');
}
```
../ means "go up one directory".

4. Complete the CSS Properties (Optional but Recommended)

To ensure the background image behaves as expected, you can add other background properties:

background-repeat: Controls if the image repeats. Use no-repeat to show the image only once.
background-size: Controls the size of the background image. cover scales the image to cover the entire container (the body), while contain scales it to fit within the container without distortion. You can also use percentages or pixels.
background-position: Sets the starting position of the background image. Common values are center, top, bottom, left, right, or combinations (e.g., center center).
background-attachment: Determines whether the background image scrolls with the rest of the page (scroll) or is fixed (fixed).

Here's an example with common properties:

<!DOCTYPE html>
<html>
<head>
    <title>My Background Image Page</title>
    <style>
        body {
            background-image: url('path/to/your-image-name.jpg'); /* Your image path here */
            background-repeat: no-repeat; /* Prevent repeating */
            background-size: cover; /* Cover the whole body */
            background-position: center center; /* Center the image */
            background-attachment: fixed; /* Keep image fixed while scrolling */
        }
    </style>
</head>
<body>

    <h1>Welcome!</h1>
    <p>This page has a background image.</p>
    <!-- Add more content here to test scrolling -->

</body>
</html>

5. Save Your File

In Notepad, go to File > Save As.
Navigate to the folder where you want to save your HTML file.
In the "File name" box, type a name followed by .html (e.g., index.html, mypage.html).
Crucially, change the "Save as type" dropdown from "Text Documents (*.txt)" to "All Files (*.*)".
Click "Save".

Make sure your image file (your-image-name.jpg or similar) is in the correct location relative to the saved HTML file, as specified in your url() path.

6. Open in a Browser

Locate the .html file you saved and double-click it. It should open in your default web browser, displaying the background image you specified from your local folder.

Using Notepad requires careful typing, but by embedding CSS targeting the <body> tag, you can easily add a local background image to your HTML document.

askvity