Inserire testo su immagine | Guida creare con i CSS

Inserire testo su immagine


Norway
Bottom Left
Top Left
Top Right
Bottom Right
Centered


Codice HTML

<div class="container">
 <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" alt="Norway" 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>


Codice CSS

/* 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%);
}