Introduction
In this article I will provide a position of an image and for this image I will use the Z-index to make the image like a background of the specified area.
Step 1
Design a header with in a div (container) using HTML & CSS. Provide a heading to it with a H1 tag. Provide properties for the heading using CSS.
HTML
<html>
<head>
<title>Text-on-Image</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=container>
<header>
<h1>Text On Image</h1>
</header>
</div>
</body>
</html>
CSS
body {background-color:#acf6fb
}
* {
margin:0px; padding:0px;
}
#container {
width:1024px;
height:auto;
margin:0px auto;
}
header {
height: 200px;
width: 100%;
border-bottom-style:ridge;
color:#12027d;
}
h1 {
text-align: center;
padding-top: 20px;
font-size: 50px;
padding-bottom:50px;
Output
![heading-in-header.jpg]()
Step 2
Design a div (Main body) within the div (container), define its property using CSS.
HTML
<div id="main_body">
</div>
CSS
#main_body {
height: 200px;
width:1024px;
overflow:scroll;
border-bottom-style:ridge;
}
Output
![main-body-for-text-on-image.jpg]()
Step 3
Insert an image in the div main body & give it properties for size & position through HTML & CSS.
HTML
<div id="main_body">
<img id="absolute_image" src="../images/theme_2.jpg"/>
</div>
CSS
#absolute_image {
height: 500px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Output
![image-insert-main-body-for-text-on-image.jpg]()
Step 4
Use the Z-index of the image for a different stack order of the elements in CSS.
CSS
#absolute_image {
height: 500px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1; /*Now this image will look like a background for specified image area*/
}
Output
![use-z-index-on-image-main-body-for-text-on-image.jpg]()
Finale code
HTML
<html>
<head>
<title>Text-on-Image</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=container>
<header>
<h1>Text On Image</h1>
</header>
<div id="main_body">
<img id="absolute_image" src="../images/theme_2.jpg"/>
</div>
</div>
</body>
</html>
CSS
body {background-color:#acf6fb
}
* {
margin:0px; padding:0px;
}
#container {
width:1024px;
height:auto;
margin:0px auto;
}
header {
height: 200px;
width: 100%;
border-bottom-style:ridge;
color:#12027d;
}
h1 {
text-align: center;
padding-top: 20px;
font-size: 50px;
padding-bottom:50px;
}
#main_body {
height: 200px;
width:1024px;
overflow:scroll;
border-bottom-style:ridge;
}
#absolute_image {
height: 500px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;/*Now this image will look like a background of specified image area*/
}
Finale output
![Finale-output-use-z-index-on-image-main-body-for-text-on-image.jpg]()