Question

How To Write Paragraph On Image In Html

Answer 1

Place the image within the container. Place the text immediately below the image within the container and make it's position absolute (to overlay text on the image) and place it as you please.
...
Write the following snippet:


Your text

Answer 2

Explanation:

<div class="container">

<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">

<div class="bottom-left">Bottom Left</div>

<div class="top-left">Top Left</div>

<div class="top-right">Top Right</div>

<div class="bottom-right">Bottom Right</div>

<div class="centered">Centered</div>

</div>

Step 2) Add 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%);

}