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
  1. <html>  
  2. <head>  
  3.      <title>Text-on-Image</title>  
  4.      <link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  
  5. </head>  
  6. <body>  
  7. <div id=container>  
  8. <header>  
  9.      <h1>Text On Image</h1>  
  10. </header>  
  11. </div>  
  12. </body>  
  13. </html> 
CSS
  1. body {  
  2.     background-color#acf6fb  
  3. }  
  4.   
  5. * {  
  6.     margin0px;  
  7.     padding0px;  
  8. }  
  9.   
  10. #container {  
  11.     width1024px;  
  12.     heightauto;  
  13.     margin0px auto;  
  14. }  
  15.   
  16. header {  
  17.     height200px;  
  18.     width100%;  
  19.     border-bottom-styleridge;  
  20.     color#12027d;  
  21. }  
  22.   
  23. h1 {  
  24.     text-aligncenter;  
  25.     padding-top20px;  
  26.     font-size50px;  
  27.     padding-bottom50px;  
  28. }     
    Output
     
    heading-in-header.jpg
     
    Step 2
     
    Design a div (Main body) within the div (container), define its property using CSS.
     
    HTML
    1. <div id="main_body">    
    2. </div>  
    CSS
    1. #main_body {   
    2. height200px;  
    3. width:1024px;  
    4. overflow:scroll;  
    5. 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
    1. <div id="main_body">  
    2.  <img id="absolute_image" src="../images/theme_2.jpg"/>  
    3. </div> 
    CSS
     
    1. #absolute_image {  
    2. height500px;  
    3. width100%;  
    4. positionabsolute;  
    5. top: 0px;  
    6. 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
    1. #absolute_image {  
    2. height500px;  
    3. width100%;  
    4. positionabsolute;  
    5. top: 0px;  
    6. left: 0px;  
    7. 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
    1. <html>  
    2.   
    3.     <head>  
    4.         <title>Text-on-Image</title>  
    5.         <link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  
    6.     </head>  
    7.   
    8.     <body>  
    9.         <div id=container>  
    10.             <header>  
    11.                 <h1>Text On Image</h1>  
    12.             </header>  
    13.             <div id="main_body">  
    14.                 <img id="absolute_image" src="../images/theme_2.jpg" />  
    15.             </div>  
    16.         </div>  
    17.     </body>  
    18.   
    19. </html> 
      CSS
      1. body {  
      2.     background-color#acf6fb  
      3. }  
      4.   
      5. * {  
      6.     margin0px;  
      7.     padding0px;  
      8. }  
      9.   
      10. #container {  
      11.     width1024px;  
      12.     heightauto;  
      13.     margin0px auto;  
      14. }  
      15.   
      16. header {  
      17.     height200px;  
      18.     width100%;  
      19.     border-bottom-styleridge;  
      20.     color#12027d;  
      21. }  
      22.   
      23. h1 {  
      24.     text-aligncenter;  
      25.     padding-top20px;  
      26.     font-size50px;  
      27.     padding-bottom50px;  
      28. }  
      29.   
      30. #main_body {  
      31.     height200px;  
      32.     width1024px;  
      33.     overflowscroll;  
      34.     border-bottom-styleridge;  
      35. }  
      36.   
      37. #absolute_image {  
      38.     height500px;  
      39.     width100%;  
      40.     positionabsolute;  
      41.     top: 0px;  
      42.     left: 0px;  
      43.     z-index-1;  
      44.     /*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


        Similar Articles