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:
Syntax:
<img src = “image location” alt = “alt text” height = “in pixels” width = “in pixels“>| <img> | stands for image tag |
| src | stands for source attribute, containing the address/location of the image. |
| alt | containsthe text which is shown/displayed instead of the image, when the image fails to load, address is not found, or any other error occur. |
| height | for adjusting the height of the image. |
| width | for 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:
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:
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:
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:
