Text over Background Image with Viewport Width (vw)

#css #html #website #design

Plan

Many time we show texts over images. We will define three background images and then write text above (top, middle and bottom) it.

Basic Structure

Our site will contain a table with 3 column. Each will contain a background image with text above it.

<style type="text/css">
    table{
        width: 100%;
    }
    tr{
        width: 100%;
        vertical-align: top;
    }
</style>
<table>
    <tr>
        <td>
            <p>Road to Heaven</p>
        </td>
        <td>
            <p>Road to Heaven</p>
        </td>
        <td>
            <p>Road to Heaven</p>
        </td>
    </tr>
</table>

Background image

Let's add the background image first.

td{
        background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1545&q=80");
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
}

Text above image

Also let's design the text a bit.

p{
        font-size: 2vw;
        padding: 20px;
        background-color: #000000b5;
        border: 1px solid #ffffff;
        border-radius: 15px;
        color: white;
        text-shadow: 0px 1px #eff1f4;
}

Position the text

Now we will position 1st text on top, 2nd text in middle and 3rd text on bottom.

td:nth-child(1) p{
      margin-top: 0vw;
      margin-bottom: 40vw;
}
td:nth-child(2) p{
      margin-top: 20vw;
      margin-bottom: 20vw;
}
td:nth-child(3) p{
      margin-top: 40vw;
      margin-bottom: 0vw;
}

Result

Let's see the result in different screen widths.

1200px

800px

400px

Full Code

<style type="text/css">
    table{
        width: 100%;
    }
    tr{
        width: 100%;
        vertical-align: top;
    }
    td{
        background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1545&q=80");
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
    }
    p{
        font-size: 2vw;
        padding: 20px;
        background-color: #000000b5;
        border: 1px solid #ffffff;
        border-radius: 15px;
        color: white;
        text-shadow: 0px 1px #eff1f4;
    }
    td:nth-child(1) p{
      margin-top: 0vw;
      margin-bottom: 40vw;
    }
    td:nth-child(2) p{
      margin-top: 20vw;
      margin-bottom: 20vw;
    }
    td:nth-child(3) p{
      margin-top: 40vw;
      margin-bottom: 0vw;
    }
</style>
<table>
    <tr>
        <td>
            <p>Road to Heaven</p>
        </td>
        <td>
            <p>Road to Heaven</p>
        </td>
        <td>
            <p>Road to Heaven</p>
        </td>
    </tr>
</table>