How TO – Image with Transparent Text

Learn how to create an image with a transparent (see-through) background text, using CSS.

Responsive Image with Transparent Text

Notebook

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.

Example

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial;
font-size: 17px;
}

.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>

<h2>Responsive Image with Transparent Text</h2>

<div>
<img src=”/w3images/notebook.jpg” alt=”Notebook” style=”width:100%;”>
<div>
<h1>Heading</h1>
<p>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.</p>
</div>
</div>

</body>
</html>

How To Create a Transparent Image Text

Step 1) Add HTML:

Example

<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:

Example

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial;
font-size: 17px;
}

.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.container img {vertical-align: middle;}

<h2>Responsive Image with Transparent Text</h2>

</body>
</html>

Previous

Next