HTML Background images

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Background Images

Background Image on a HTML element

The HTML style attribute and the CSS background-image property is used to add a background image on an HTML element,:

<!DOCTYPE html>

<html>

<body>

<h2>Background Image</h2>

<p>A background image for a p element:</p>

<p style=”background-image: url(‘img_girl.jpg’);”>

You can specify background images<br>

for any visible HTML element.<br>

In this example, the background image<br>

is specified for a p element.<br>

By default, the background-image<br>

will repeat itself in the direction(s)<br>

where it is smaller than the element<br>

where it is specified. (Try resizing the<br>

browser window to see how the<br>

background image behaves.

</p>

</body>

</html>

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

style>
p {
background-image: url(‘img.jpg’);
}
</style>

Output:

Background Image

A background image for a p element:

You can specify background images
for any visible HTML element.
In this example, the background image
is specified for a p element.
By default, the background-image
will repeat itself in the direction(s)
where it is smaller than the element

Background Properties

background-repeat: 

In case the background image is smaller than the element, the image repeats itself, horizontally as well as vertically, until it reaches the end of the element:

background-cover:

To cover the entire element with a background image, set the background-size property to cover.

Make sure the entire element is always covered and set the background-attachment property to fixed.

This way, the background image will cover the entire element, without stretching 

background-stretch:

In case you require the background image to stretch to fit the entire element, set the background-size property to 100% 100%:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(‘img.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h2>Background No Repeat</h2>
</body>
</html>

Output: