How to create: images with transparent text

Learn how to use CSS to create images with transparent (semi-transparent) background text.

Transparent image text

Norge
Heading

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.

Prova själv

How to create transparent image text

Step 1 - Add HTML:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Heading</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

Step 2 - Add CSS:

.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 attach to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with opacity of 0.5 */
  color: #f1f1f1; /* Gray text */
  width: 100%; /* Full width */
  padding: 20px; /* Några inre marginaler */
}

Prova själv