Bhavitha Cherukuri: HTML Background Images

HTML Background Images

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

Background Image:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('images/mountain.jpeg');
  
}
</style>
</head>
<body>

<h1>Hii</h1>

</body>
</html>

A new webpage opens with the image inserted in the background:

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:

As we have seen that the images has been repeating, so now we will solve this issue below:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('images/mountain.jpeg');
}
</style>
</head>
<body>

    <h2>Background Repeat</h2>

    <p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>
    
    </body>
    </html>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('images/mountain.jpeg');
  background-repeat: no-repeat; 

</style>
</head>
<body>

<h1>Hii</h1>

</body>
</html>

A new webpage opens with the image inserted in the background:

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('images/mountain.jpeg');
  background-attachment: fixed;
  background-size: cover;   
}
</style>
</head>
<body>

<h1>Hii</h1>

</body>
</html>