Layering Text Without White Background

April 2, 2022

I am trying to complete the Odin Project’s "Sign-Up Form" but I am having trouble with layering the text over the image.

If I use position:absolute; the text does not respect the container’s width.

If I use position:relative; I get a white background under the text.

I am in dire need of guidance.

Thank you.

<div class="container-one">    
    <h1>Sign up now!</h1>
    <img src="1.jpg" alt="">    
</div>

<style>
    img { 
        width: 100%;
        z-index: -1;
    }

    h1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;

    }
</style>

>Solution :

You’re almost there with position: absolute. The last piece is you need to set position: relative to .container-one which is the container for both image and text.

<div class="container-one">
  <h1>Sign up now!</h1>
  <img src="https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
</div>

<style>
  .container-one {
    position: relative;
    width: 50%;
  }
  
  img {
    width: 100%;
    z-index: -1;
  }
  
  h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
  }
</style>

You can check this doc

Another solution for your case could be background-image

<div class="container-one">
  <h1>Sign up now!</h1>
</div>

<style>
  .container-one {
    position: relative;
    width: 50%;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&w=1000&q=80');
  }
  
  h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
  }
</style>