HTML Background Image
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
Add a background image on a HTML element:
<p style="background-image:
url('img.jpg');">
You can also specify the background image in the <style> element,
in the <head> section:
Example
Specify the background image in the <style> element:
<style>
p {
background-image: url('img.jpg');
}
</style>
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
Add a background image for the entire page:
<style>
body {
background-image: url('img.jpg');
}
</style>
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>
body {
background-image: url('example_img.jpg');
}
</style>
To avoid the background image from repeating itself, set the background-repeat property
to no-repeat.
Example
<style>
body {
background-image: url('example_img.jpg');
background-repeat: no-repeat;
}
</style>
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>
body {
background-image: url('img.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Background Stretch
If you want the background image to stretch to fit the entire
element, you can set the background-size property
to 100% 100%:
Try resizing the browser window, and you will see that the image
will stretch, but always cover the entire element.
Example
<style>
body {
background-image: url('img.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Learn More CSS
From the examples above you have learned that background images
can be styled by using the CSS background properties.
HTML <picture> Element
The HTML <picture> element allows you
to display different pictures for different devices or screen sizes.
The HTML <picture> Element
The HTML <picture> element
gives web developers more flexibility in specifying image resources.
The <picture> element contains
one or more <source> elements, each referring
to different images through the srcset attribute. This
way the browser can choose the image that best fits the current view and/or
device.
Each <source> element has
a media attribute that defines when the image
is the most suitable.
Example
Show different images for different screen sizes:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Note: Always specify an <img> element
as the last child element of the <picture> element.
The <img> element is used by
browsers that do not support the <picture> element,
or if none of the <source> tags match.
When to use the Picture Element
There are two main purposes for the <picture> element:
1.
Bandwidth
If you have a small screen or device, it is not necessary to load
a large image file. The browser will use the first <source> element
with matching attribute values, and ignore any of the following elements.
2. Format
Support
Some browsers or devices may not support all image formats. By
using the <picture> element, you can add
images of all formats, and the browser will use the first format it recognizes,
and ignore any of the following elements.
Example
The browser will use the first image format it recognizes:
<picture>
<source srcset="img.png">
<source srcset="img.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Note: The browser will use the first <source> element
with matching attribute values, and ignore any following <source> elements.
HTML Image Tags
|
Tag |
Description |
|
<img> |
Defines an image |
|
<map> |
Defines an image map |
|
<area> |
Defines a clickable area
inside an image map |
|
<picture> |
Defines a container for
multiple image resources |
