A PHP Error was encountered

Severity: 8192

Message: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated

Filename: libraries/Filtered_db.php

Line Number: 23

How to position text over an image using CSS
Q:

How to position text over an image using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  248 
Very Easy
0

How to position text over an image using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS position property

When creating a photo gallery or something like that you might need to place some caption text or description over the image. You can use the CSS positioning methods in combination with the margin property to position or place the text over an image (i.e. the <img> element).

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
<style>
    .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;        
        text-align: center;
        top: 40%; /* Adjust this value to move the positioned div up and down */
        background: rgba(0, 0, 0, 0.8);
        font-family: Arial,sans-serif;
        color: #fff;
        width: 60%; /* Set the width of the positioned div */
    }
</style>
</head> 
<body>
    <div class="box">
    	<img src="/examples/images/kites.jpg" alt="Flying Kites">
        <div class="text">
            <h1>Flying Kites</h1>
        </div>
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now