DEV Community

loading...

Text over Background Image with Viewport Width (vw)

asif0228 profile image Asif Uddin ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Result

Let's see the result in different screen widths.

1200px

1200px

800px

800px

400px

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>
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

pic
Editor guide
Collapse
afif profile image
Temani Afif

You shouldn't use table to create layouts. Use CSS grid of flexbox: jsfiddle.net/mLh57neu/

Collapse
asif0228 profile image
Asif Uddin Author

It is only to keep things simple.

Thanks for the advice.
I will keep that in mind.

Collapse
afif profile image
Temani Afif • Edited

it's also simpler without table