Post
Ask Question

How to Use Absolute Position Property in CSS

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: 0;  
    padding: 0;  
}  
#container {  
    width: 1024px;  
    height: auto;  
    margin: 0 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

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

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: 0;  
    left: 0;  
}

Output

image-insert-main-body-for-text-on-image

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: 0;  
    left: 0;  
    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

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: 0;  
    padding: 0;  
}    
#container {  
    width: 1024px;  
    height: auto;  
    margin: 0 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: 0;  
    left: 0;  
    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


Similar Articles