To insert an image in HTML page, is a very common and easy task that enhances the appearence of any web page. It makes a web age look more attractive.
In this article, our task is to insert an image in HTML page. We have used three different approaches using HTML tags and CSS properties to insert an image in HTML page.
Approaches to Insert an Image in HTML PageHere is a list of approaches to insert an image in HTML page which we will be discussing in this article with stepwise explaination and complete example codes.
Insert an Image using img TagInsert an Image using background PropertyInsert an Image using embed TagInsert an Image using img TagTo insert an image, we have used HTML img tag. HTML img tag is an inline and empty element used to embed image in the HTML document.
We have used img tag to insert image using link of the image. The alt attribute describes about the image when image fails to load.Then, we have used img element selector to set the top margin and width of the image using CSS margin-top and width property.ExampleHere is a complete example code implementing above mentioned steps to insert an image in HTML page using HTML img tag.
Inserting Image Using img Tagimg {width:100%; margin-top: 15px;}To Insert an Image in HTML PageIn this example we have used Html imgtag to insert an image in HTML page.
Insert an Image using background PropertyIn this approach to insert an image in HTML page, we have used CSS background property with url() function.
We have used a div container with img class. We will be setting background image of this div container.We have used img class to set the background of div using url() function.Then, we have used background-repeat property to stop repeating of image and set the dimension of image using CSS height and width property.ExampleHere is a complete example code implementing above mentioned steps to insert an image in HTML page using CSS background property and url() function.
Inserting Image Using img Tag.img {background: url('/css/images/css.jpg');width:100%; height: 200px;background-repeat: no-repeat;}To Insert an Image in HTML PageIn this example we have used CSS backgroundproperty with url() function to insert an image in HTML page.
Insert an Image using embed TagIn this approach, we have used HTML embed tag to insert an image in HTML page which is used as a container for external applications, multimedia, and interactive content that the browser don't understand.
We have used embed tag to insert image and used type attribute to specify the type of media.Then, we have used embed as element selector to set the width and top margin of the image.ExampleHere is a complete example code implementing above mentioned steps to insert an image in HTML page using HTML embed tag.
Inserting Image Using img Tagembed {width:100%; margin-top: 15px;}To Insert an Image in HTML PageIn this example we have used Html embedtag to insert an image in HTML page.
ConclusionIn this article, to insert an image in HTML page we have understood three different approaches which are: by using HTML img tag, CSS background property and HTML embed tag. Out of all three approaches we have discussed, HTML img tag is most frequently used to insert an image.
Lokesh Badavath Updated on: 21-Oct-2024
92K+ Views
Related ArticlesHow to use an animated image in HTML page?How to Insert Hyperlink in HTML Page?How to use floating image in HTML page?How can I add an image from my PC to my HTML page?How to use image height and width attribute in HTML Page?How to redirect from an HTML page?How to display an image in HTML?How to insert an image in a Tkinter canvas item?How to make page links in HTML Page?How to use JavaScript to redirect an HTML page?How to include an external JavaScript inside an HTML page?How to make an image responsive in HTML?How to make an image draggable in HTML?How to insert an image in to Oracle database using Java program?How to insert an image in to MySQL database using Java program?Kickstart Your CareerGet certified by completing the course
Get Started
Advertisements