HTML Images

Certainly! An HTML image is typically displayed using the <img> (image) element. Here's an explanation of the basic structure and attributes related to HTML images.

Basic Structure

Example

<img src="img-house.jpg" alt="house">

You can click on above box to edit the code and run again.

Output

Example

              
<img src="img-girls.jpg" alt="girls">

You can click on above box to edit the code and run again.

Output

Example

              
<img src="img-mount.webp" alt="mount">

You can click on above box to edit the code and run again.

Output

HTML Images Syntax

The syntax for including images in HTML using the <img> (image) element is as follows:

Example

              
<img src="image-source" alt="alternative-text">

You can click on above box to edit the code and run again.

Output

Here's an explanation of each part of the syntax:

<img>: This is the opening tag of the image element.

src="image-source": The src attribute specifies the source of the image. It can be a URL (web address) or a file path pointing to the location of the image on your server or device.

alt="alternative-text": The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded or for accessibility purposes, helping users with visual impairments understand the content of the image.

Example

              
<img src="example.jpg" alt="example.jpg">

You can click on above box to edit the code and run again.

Output

In this example:

The image source is "example.jpg."
The alternative text is set to "Example Image."

You can also include additional attributes to control the appearance and behavior of the image. Here are a few examples:

width and height: Specify the width and height of the image in pixels.

Example

            
<img src="example.jpg" alt="example.jpg" width="300" height="200" >

You can click on above box to edit the code and run again.

Output

title: Provides additional information about the image when the user hovers over it.

Example

              
<img src="example.jpg" alt="example.jpg" title="Click to enlarge" >

You can click on above box to edit the code and run again.

Output

These attributes enhance the presentation, accessibility, and user experience of images on your web page.

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

              
<a href="default.asp">
<img src="example.jpg" alt="example.jpg" width="30px;" height="20px;" >
</a>

You can click on above box to edit the code and run again.

Output

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p> <img src="example.jpg" alt="example.jpg" style="float:right; width: 30px; height: 20px;" >The image will float to the right of the text.</p>
<p> <img src="example.jpg" alt="example.jpg" style="float:left; width: 30px; height: 20px;" >The image will float to the left of the text.</p>

You can click on above box to edit the code and run again.

Output

HTML Background Images

A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

              
<p style="background-image: url('img_girl.jpg');">

You can click on above box to edit the code and run again.

Output

You can also specify the background image in the <style> element, in the <head> section:

Example

             
<style>
p{
<p style="background-image: url('img_girl.jpg');">
}
<style>

You can click on above box to edit the code and run again.

Output

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the <body> element:

Example

              
<style>
p{
<p style="background-image: url('img_girl.jpg');">
}
<style>

You can click on above box to edit the code and run again.

Output

Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

Example

              
              
<style>
p{
<p style="background-image: url('img_girl.jpg');">
}
<style>

You can click on above box to edit the code and run again.

Output

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

Example

<style>
p{
<p style="background-image: url('img_girl.jpg');">
<p style="background-image: no repeat;"
}
<style>

You can click on above box to edit the code and run again.

Output

Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example

            
<style>
p{
<p style="background-image: url('img_girl.jpg');">
<p style="background-image: no repeat;"
<p style="background-attachment: fixed;"
<p style="background-size: cover;"
}
<style>

You can click on above box to edit the code and run again.