How to position text over an image using CSS?

How to position text over an image using CSS?

Asked on October 31, 2018 in HTML / CSS.
Add Comment


  • 2 Answer(s)

    Here CSS position Property is used for positioning text over an image using css.
        The CSS positioning methods can be used in combination with the margin property to position or place the text over an image,

    For examaple:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Placing Text Over an Image in CSS</title>
    <style type="text/css">
        .box{
            position: relative;
            display: inline-block; /* Make the width of box same as image */
        }
        .box .text{
            position: absolute;
            z-index: 999;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 40%; /* Adjust this value to move the positioned div up and down */
            text-align: center;
            width: 60%; /* Set the width of the positioned div */
        }
    </style>
    </head>
    <body>
        <div class="box">
            <img src="images/kites.jpg" alt="Flying Kites">
            <div class="text">
                <h1>Flying Kites</h1>
            </div>
        </div>
    </body>
    </html>
    
    Answered on October 31, 2018.
    Add Comment
    To position Text over an image using CSS 

    Example

    /* Container holding the image and the text */
    .container {
    position: relative;
    text-align: center;
    color: white;
    }

    /* Bottom left text */
    .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    }

    /* Top left text */
    .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    }

    /* Top right text */
    .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    }

    /* Bottom right text */
    .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    }

    /* Centered text */
    .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    Answered on January 27, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.