How to insert Background Image in HTML From Local Folder ?

How to insert Background Image in HTML From Local Folder ?

Last Updated : 15 Mar, 2024

Adding a background image to your HTML page can enhance its visual appeal and make it more engaging for users. When the image is stored in a local folder, you can easily reference it in your HTML file using relative or absolute paths.

Table of Content

Using Inline CSS
Using Internal CSS

Using Inline CSS

You can use inline CSS to set a background image for an HTML element directly within the element's style attribute. The background-image property is used to set the background image. The url function specifies the path to the image file. In this case, it's assumed that the image is stored in a folder named images within the same directory as the HTML file, and the image file is named background.jpg.

Example: To demonstrate adding the background image in HTML from local a folder using inline CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Background Image</title>
</head>

<body style="background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png')">
    <h1>Welcome to GeeksforGeeks</h1>
</body>

</html>

Output:

html-background-image

Using Internal CSS

Alternatively, you can use internal CSS within the <head> section of your HTML file to set the background image for the entire page or specific elements. The background-size property is set to cover to ensure that the background image covers the entire page. The background-position property is set to center to center the background image on the page.

Example: To demonstrate adding the background image in HTML from local folder using internal CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Background Image</title>

    <style>
        body {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>

<body>
    <h1>Welcome to GeeksforGeeks</h1>
</body>

</html>

Output:

html-background-image

How to insert Background Image in HTML From Local Folder ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Insert an Image from Folder in HTML

The <img> src attribute is used to insert an image from folder in HTML. The src attribute accepts absolute and relative file path. Table of ContentUsing HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> tag

How to Set Background Image in HTML Table ?

Setting a background image in an HTML table can enhance the visual appeal of your webpage. In this article, we will discuss two methods to set a background image in an HTML table i.e. using inline CSS and external CSS. Set Background Image in HTML Table using Inline CSSIn this approach, we directly

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How to Set Background Image in CSS?

CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied

How to Add Background Image in HTML?

Adding a background image to an HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add a background image in HTML, but this attribute is deprecated in HTML5 and is not in use. In place of the bac

How to Add Image inside Table Cell in HTML ?

Adding images inside HTML table cells can enhance the visual appeal of your tables by up to 60%, making your content more engaging and easier to understand. This approach allows you to effectively present visuals alongside text for better communication and user experience.Image inside Table CellThes

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a

How to Specify a Fixed Background Image in CSS?

We will explore how to specify a fixed background image using the background-attachment property in CSS. This property is used to control the behavior of a background image as the user scrolls through a web page. By using the background-attachment property, you can make a background image fixed, scr

How to Change Background Image in javaScript?

This article will show you how to change the background color in JavaScript. Changing a background image in JavaScript involves modifying the style property of an HTML element to update its backgroundImage property. This can be done by selecting the element and setting its style.backgroundImage prop