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

News

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 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 Add Border to an Image in HTML?

To add a border to an image in HTML, you can use the style attribute directly within the <img> tag or apply CSS rules to target the image. Method 1: Using the style AttributeYou can add a border inline by using the style attribute directly on the <img> element: [GFGTABS] HTML <img src

How to Link an Image to Another Page in HTML?

To link an image to another page in HTML, you can wrap the <img> element inside an anchor (<a>) tag. When the image is clicked, it will navigate to the specified page, just like a regular hyperlink. Example of Linking an Image to Another PageHere's how you can achieve this: [GFGTABS] HTM

How to make an HTML link to open a folder ?

To create a link to a file or folder, you need toÂ use an <a href > 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: <a href="Path">

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 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

翻译：