HTML Background Image

Inserting image in HTML

An image (technically digital image) in HTML or even in general technical aspects, is a binary representation of visual information. By visual information we mean, in the form of drawings/pictures, gifs/individual video frames, logos, or graphs etc.

“Inserting images in HTML” can be easily achieved with the help of <img> tag.  This tag is an empty tag, as it only contains attributes and hence the closing tag is not required here.

Note: The images can be inserted anywhere or in any section by using the <img> tag. We’ll see various examples regarding this as we proceed. The only point to remember regarding this is, that the <img> tag must be declared inside the <body> “ “ </body> tag.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML image</title>
</head>
  <body>
    <img
      src="https://pixabay.com/get/g6da506c7a5c5b778d227c75e55fa3d525c8f87b42693d64cf7ec72f9807d423767579867119e9305f82e5ecf213f6dbb765c5e09f3ff6cc5f8c26037f828b1ce088515f71e3ed381fcba4240df5fa20a_1920.jpg"
      alt="Image of 'home in the hills'"
    />
  </body>
</html>



Try it Now

Output:

HTML Background Image

Syntax:

<img src = “image location” alt = “alt text” height = “in pixels” width = “in pixels“>
<img>stands for image tag
srcstands for source attribute, containing the address/location of the image.
altcontainsthe text which is shown/displayed instead of the image, when the image fails to load, address is not found, or any other error occur.
heightfor adjusting the height of the image.
widthfor adjusting the width of the image.

Note: We can have more attributes in the image tag like style, border, align etc. Above are the most commonly used attributes of image tag to define and declare basic structure of the image to be displayed. It is advised to always use the above 4 attributes in your HTML script/code.

*pixels: It can be of different sizes depending on the resolution of the screen you are displaying your output at.

Background images in HTML

A background image in HTML can be defined as an image in the rear or in the background of an element. It is used to enhance the overall look of our webpage and also to make an attractive and eye-catching user-interface of our webpage/website.

Syntax:

<style>
    body {
      background-image: url('//image url');
//image-properties
      background-attachment: fixed;
      background-size: auto;
    }
    </style>

Example :

<style>
    body {
      background-image: url('//image url');
//image-properties
      background-attachment: fixed;
      background-size: auto;
    }
    </style>

Output:

HTML Background Image

Note: The above output reflects that the background image inserted is printed one after the another for the whole page. i.e., repeated image. This happens by default while using the background image attribute. This can simply be avoided by using the ‘no repeat’ keyword.

Without repetition:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML image</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <style>
    body {
      background-image: url('https://i.pinimg.com/originals/f7/67/2d/f7672d04fc037f5b22cae37ef569919b.jpg');
      background-attachment: fixed;
      background-size: auto;
      background-repeat: no-repeat;
    }
    </style>
    </body>
</html>

Output:

HTML Background Image

Another use of background images in HTML is to define the theme of the website. Sometimes, allocating a suitable image in the background of your web-page dictates the whole user-experience of your websites which looks very attractive to other users.

We can add a background image by following methods:

  • By using background attributes in HTML tags.
  • By using Inline or Internal Style Sheets.

By using background attributes in HTML tags

The background image is applicable for almost any element in HTML. In order to add a background image for an element in HTML, we simply put the ‘background-image’ attribute inside the element scope and provide the URL/location of the image. In the following example, we tried to dictate the theme of the webpage by including background image attributes.

Example:

File 1 = index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Revision 1</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body class="body">
    <h1 class="contentinfo">Hello! World</h1>
    <hr />


    <hr />
    <div class="recipe">
      <h2 style="text-align: left; color: rgb(253, 241, 72)">
        Recipe for Chai (Tea):
      </h2>
      <ol type="1">
        <div
          style="
            color: azure;
            font-size: 18px;
            font-family: Arial, Helvetica, sans-serif;
          "
        >
          <li>Add 1 cup of water to a container</li>
          <li>Boil the water</li>
          <li>
            Add the following contents in it:
            <ol type="a">
              <li>Ginger and cardamom</li>
              <li>Two tsp sugar</li>
              <li>1 tsp of tea leaves</li>
              <li>1 cup of milk</li>
            </ol>
          </li>
          <li>Let the mixture come to a boil</li>
          <li>The tea is ready</li>
        </div>
      </ol>
    </div>
    <hr />
    <p style="text-align: center; color: rgb(247, 250, 69)">
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    </p>
    <hr />
    <ul>
      <li>
        <b style="color: purple">
          Let's suppose we need to make 'n' number of cups of tea using the same
          recipe, but since the quantity is not 1 cup, hence we need to
          calculate the ratio of ingredients depending on the number of cups.
        </b>
        <br />
        <b
          >Let's make this activity fun by adding a demo function to try to
          calculate the ratio using a function in JavaScript</b
        >
      </li>
      <br />
      <li><b>The following is the JavaScript code : </b></li>
      <code style="color: rgb(219, 42, 101)">
        <b>
          const chai_maker = function (cups) { const liquids = cups / 2;
          <p>
            console.log(`The quantity of milk and water should be ${liquids}
            cups each`);
          </p>
          <p>const masala = cups / 1.6;</p>
          console.log( masala <= 3 ? "Add 1 piece of each ingredient stated
          above" : `Add ${Math.floor(masala)} piece of each ingredient stated
          above` ); };
          <p>chai_maker(3); chai_maker(5); chai_maker(9);</p>
        </b>
      </code>
    </ul>
    <hr />
    <hr />
  </body>
</html>

File 2: style.css

.recipe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  background-image: url("https://www.thestatesman.com/wp-content/uploads/2019/05/tea-culture.jpg");
  background-size: auto;
  background-repeat: no-repeat;
  border-style: dotted;
  border-color: rgb(249, 252, 76);
}
.contentinfo {
  width: 400px;
  height: 50px;
  border: double 8px transparent;
  border-radius: 70px;
  background-image: linear-gradient(white, white),
    radial-gradient(circle at top left, #f69ec4, #32557f);
  background-origin: border-box;
  background-clip: content-box, border-box;
  text-align: center;
}
.body {
  background-image: linear-gradient(to left, #194757 0%, #c7f5a8 100%);
}

Output:

HTML Background Image

By using Inline or Internal Style Sheets.

In this method, we simply inherit the background image attribute directly in the HTML script(inline) rather than declaring the background image tag and it’s properties in the .css file.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Guess My Number!</title>
  </head>
  <body>
    <style>
      body {
        background-image: url("https://miro.medium.com/max/1000/1*as5gD8Y9pFOWX7JcsppLTA.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: contain;
      }
    </style>
    <header>
      <h1>Guess My Number!</h1>
      <p class="between">(Between 1 and 20)</p>
      <button class="btn again">Again!</button>
      <div class="number">?</div>
    </header>
  </body>
</html>

File 2: style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}


html {
  font-size: 62.5%;
  box-sizing: border-box;
}


body {
  font-family: "Press Start 2P", sans-serif;
  color: #eee;
  background-color: #222;
  /* background-color: #60b347; */
}


/* LAYOUT */
header {
  position: relative;
  height: 35vh;
  border-bottom: 7px solid #eee;
}
/* ELEMENTS STYLE */
h1 {
  font-size: 6rem;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(252, 249, 70);
}
.number {
  background: #eee;
  color: #333;
  font-size: 6rem;
  width: 15rem;
  padding: 3rem 0rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}


.between {
  font-size: 1.4rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
}


.again {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

Output:

HTML Background Image



ADVERTISEMENT
ADVERTISEMENT