Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn HTML
  • HTML Images

Topics

  • HTML Introduction
  • HTML Editors
  • Fundamentals of HTML
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
  • HTML Style Attribute
  • HTML Text Formatting
  • HTML Phrase Tags
  • HTML Comments
  • HTML with CSS
  • HTML Links
  • HTML Images
  • HTML Tables
  • HTML Lists
  • HTML Blocks
  • HTML Class Attribute
  • Id Attribute for HTML
  • HTML Iframes
  • HTML JavaScript
  • HTML File Paths
  • HTML Head
  • HTML Computer Code Elements
  • HTML Entities
  • HTML Charset
  • HTML URL Encode
  • HTML and XHTML
  • HTML Layouts
  • HTML Forms
  • HTML Form Elements
  • HTML Form Input Types
  • HTML Input Attributes
  • HTML5 Introduction
  • HTML5 New Elements
  • Semantic Elements in HTML5
  • HTML5 Migration
  • Style Guide
  • HTML Canvas
  • HTML SVG

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

HTML Images

HTML image is displayed using a <img> tag which stands for an image.
The <img> tag is an empty tag which means it contains attributes only.

Synatx of Image:

<img src=”URL” alt=”image description”>

The src Attribute:

The src attribute stands for the source, it is the location of the image which is to be added. It is a standard URL of an image and similar to links.

The alt Attribute:

The alt attribute stands for Alternate Text and it specifies alternate text for an image. Normally text written in tag will not be displayed on the webpage it is displayed in place of an image if an image fails to load.

Example:

<img src=”sample.jpg” alt=”sample image”>
Try it

Height and Width Attribute:

By default, images will display at their actual size. HTML images have width and height attributes, which are used to adjust the width and height of an image. By default, the height and width are specified in pixels. You can give some height and width to display an image according to your requirements.

Example:

<img src=”sample.jpg” width=”300px” height=”400px”>
Try it

Height and Width using Style Attribute:

You can also set the height and width of image using style attribute.

Example:

<style>
/* The width of all images is set to 100%: */
img {
width: 100%;
}
</style>
<body>
<!–The width of the image is set to 150 pixels, but the stylesheet overrides it and sets the width to 100%.–>
<img src=”sample.jpg” alt=”sample image” width=”150px” height=”200px”>
<!–This image uses the style attribute, and its width is set to 150 pixels which override the stylesheet.–>
<img src=”sample.jpg” alt=”sample image” style=”width:150px;height:200px;”>
</body>
Try it

How to get image from another directory/folder?

To insert images into your webpage, that image must be present in the same folder where your .html file is located. If the image is present in some other directory then you must include the folder name in the src attribute.

Example:

<img src=”http://www.w3codingschools.com/wp-content/uploads/2020/01/sample.jpg” alt=”sample img” > 
Try it

How to add Animated Images?

Generally, animated images are in .gif format and <img> tag of HTML allows us to add animated images.

Example:

<img src=”sample.gif” alt=”sample image” style=”width:150px;height:150px;”>
Try it

Image floating:

To float the image in HTML, use the CSS float property which allows you to float an image to left or right.

Example:

<!–This image will float to the left–>
<img src=”sample.jpg” alt=”sample image” style=”float:left;”>
<!–This image will float to the right–>
<img src=”sample.jpg” alt=”sample image” style=”float:right;”>
Try it

Background Images:

An image can be used as a background image for a webpage.
The style attribute is used to add a background image to an HTML element.

Example:

<div style=”background-image: url(‘sample.jpg’);”> Hello World </div>
Try it
You can also add background image using style attribute.

Example:

<style>
div {
background-image: url(‘sample.jpg’);
height: 200px;
width: 200px;
}
</style>
<body>
<div>
HELLO WORLD
</div>
</body>
Try it

Background Image on Entire Page:

You can also add a background image to the entire page by adding a background image to the <body> element.

Example:

<style>
body {
background-image: url(‘sample.jpg’);
}
</style>
Try it

Background Repeat:

By default, the background image repeats horizontally and vertically across the height and width of the background area if the size of the image is smaller than the element.

Example:

<style>
body {
background-image: url(‘sample.jpg’);
}
</style>
Try it
You can add the background image without repetition using the background-repeat property.

Example:

<style>
body {
background-image: url(‘sample.jpg’);
background-repeat: no-repeat;
}
</style>
Try it

Background Cover:

The background image can be set to cover the element without repetition using the background-size property.
If you set the background-size to cover then it will fill the entire element, without stretching while preserving its aspect ratio.

Example:

<style>
body {
background-image: url(‘sample.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Try it

Background Stretch:

The background-size property enables you to change the size of the background image using the background-size property.
It allows you to stretch the background image horizontally vertically or both.

Example:

<style>
body {
background-image: url(‘sample.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 100%;
}
Try it

The Picture Element:

HTML 5 introduced the <picture> tag which allows us to display different pictures on different screen sizes.
The HTML <picture> element contains one or more <source> elements and one <img> element to provide different images for different screen sizes.
The <source> element contains different images for different screen sizes. The browser will consider each of the <source> elements and loads the most appropriate image. If matches are not found, the browser displays the image defined in the <img> tag.

Syntax:

<picture>
<source media=”…”>
<source media=”…”>
<img src=”…”>
</picture>
The browser will use the first image format it recognizes.

Example :

<picture>
<source media=”(min-width: 700px)” srcset=”sample1.jpg”>
<source media=”(min-width: 550px)” srcset=”sample2.jpg”>
<img src=”sample.jpg” style=”width:auto;”>
</picture>
Try it

Post navigation

HTML Links
HTML Tables

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok