How to insert Background Image in HTML From Local Folder ?

How to Insert an Image from Folder in HTML

Last Updated : 23 Oct, 2024

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 Content

Using HTML <img> src Attribute
Insert Image from Folder in CSS

Insert Image from Folder using HTML <img> src Attribute

The <img> tag is used to insert an image in HTML. The src attribute specifies the path to the image file, and other attributes like alt, width, and height can be used to customize the display. The folder image specifies with the folder name with image name. For example - "./images/logo/logo.png".

Syntax

<img src="folder_path/image.jpg" alt="description" width="value" height="value">

Example: Inserting an image form folder in HTML.

HTML

<h3>Insert an Image in HTML from a Folder</h3>

<img src="Geeks/HTML-tutorial.jpg" alt="HTML Tutorial"
        width="350px" height="230px">

Output

image-from-folder-1

Insert Image from Folder in CSS

Insert an image from folder can also be done with CSS. CSS set an image as the background of HTML element. It is useful for setting images as backgrounds for various sections.

Syntax

.element {
    background-image: url('path/to/image.jpg');
    background-size: cover;
}

Example: Inserting an Image from folder using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-image {
            width: 350px;
            height: 230px;
            background-image: url('Geeks/HTML-tutorial.jpg');
            background-size: cover;
        }
    </style>
</head>

<body>
    <h3>Insert an Image in HTML from a Folder</h3>

    <div class="background-image"></div>
</body>

</html>

Output

image-from-folder-1

How to insert Background Image in HTML From Local Folder ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Insert Image in HTML from Folder?

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 Content Using HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> ta

How to insert Background Image in HTML From Local Folder ?

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 CSSUsing Internal CSSUsing Inline C

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 Content Using img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary meth

How to make an HTML link to open a folder ?

To create a link to a file or folder, you need toÂ use an tag. HTML can be used to open a folder from our local storage. To open a folder from our local storage, use the 'href' attribute of HTML. In the href attribute, we specify the path of our folder. Syntax: Examples to open local folders using HT

How to Resize an Image in HTML?

Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint

How to Arrange Images and Text in HTML?

In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enh

How to Add Image inside Table Cell in HTML ?

Adding images inside HTML table cells can enhance the visual appeal of your tables, allowing you to effectively present images alongside text. These are the following approaches: Table of Content Using <img> tag inside Using CSS background-image propertyUsing <img> tag inside <td>T

How to Insert Images in Google Docs

Images add clarity and visual appeal to documents, making them essential for reports, presentations, and creative content. Google Docs provides various methods to insert images, whether it's through the toolbar, drag-and-drop, or linking via URL, ensuring flexibility in how visuals can be included.

How to make an image draggable in HTML?

Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5. Making any HTML5 elements including images draggable is

How to create an image bullets in HTML ?

In HTML, there are two types of lists: ordered and unordered. Ordered lists are numbered with alphabet letters or Roman numerals, while unordered lists use dots. Sometimes, you may want to replace these bullets with an image to enhance the visual appeal of your web content. To get this, we can use t