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.
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:
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:
Share your thoughts in the comments
Please Login to comment...