Introduction
In this article, I will provide the 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 within a div (container) using HTML & CSS. Provide a heading to it with an 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
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
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
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;
- }
Output
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;
-
- }
Finale output