Heading
Lorem ipsum dolor sit amet, an his etiam torquatos.
Learn how to create an image with a transparent (see-through) background text, using CSS.
Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.
<div class="container">
<img src="notebook.jpg"
alt="Notebook" style="width:100%;">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum..</p>
</div>
</div>
.container {
position: relative;
max-width: 800px;
/* Maximum width */
margin: 0 auto; /* Center it */
}
.container .content {
position: absolute; /* Position the background text */
bottom: 0;
/* At the bottom. Use top:0 to append it to the top */
background:
rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5);
/* Black background with 0.5 opacity */
color: #f1f1f1;
/* Grey text */
width: 100%; /* Full width */
padding: 20px;
/* Some padding */
}
Try it Yourself »
If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com
If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com