What is the best grid template layout?

In the image I have two elements overlapping. One element is an image and the other is a block where the text is going to be included. I am trying to learn CSS grid but having difficulties to have elements overlap like the image I have uploaded. Are there any tutorials that are similar to this? I can’t find anything on YT or Codepen. Really want to learn more of the CSS grid templates.

CSS code

  .container {
        margin-top: 100px;
        display: grid;

    .image {
        background: url(IMG/mechanical.jpeg);
        margin: 0;
        padding: 0;
        width: 70%;
        height: 90vh;
        background-position: center;
        background-size: cover;
        float: left;
        background-attachment: scroll;
        z-index: -1;

    .text-block {
        background-color: #44A09F;
        height: 410px;
        width: 900px;
        top: 10%;
        float: right;
        z-index: 9000;
        margin-top: -500px;
        opacity: 0.7;

    h1 {
        text-align: center;
        color: white;
        font-weight: bold;


 <div class="container">
                <div class="flex">
                    <div class="image"></div>
                    <div class="text-block">
                        <h1>About us</h1>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


Hey @rosstopherrr. Give this post a look, the original poster seems to be asking about exactly what you are trying to achieve here.

You give the grid however many rows and columns the layout needs and then tell the grid items what row/column to start and stop at (Layering items). It can be done in a number of ways.