When you visit some websites, have you ever wondered how text can be transparent over an image or background, or there is a transparent box with text?. Well, this is not as difficult to do as it seems, we just need to apply a few lines of HTML and CSS. Read on as I show you how it’s done.

In this example, I am going to use an image as a background and show you how to add a transparent text box over an image using CSS.

First, we need some HTML markup. Here we are creating a wrapper div and within it is the background image and another div for the text box. Nested within the text box is yet another div containing the text content. In this case an H2 heading and a paragraph of text.

HTML

<html>
  <div id="wrapper">
    <img src="images/nature.png">
    <div id="textbox">
      <div id="content">
        <h2>Let's Explore the Great Outdoors</h2>
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit 
          esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div>
    </div>
  </div>
</html>

Next, we need to add the CSS for the wrapper, text box and content. The wrapper needs to be given a position of relative so that the text box can have a position of absolute. The text box can then be moved using ‘top’ and ‘left’ CSS properties. The box is then given a grey background with an opacity setting. In this case 0.8. The text is centered using ‘text-align: center’

As the text content is nested within the text box, all that is added with CSS in this scenario is padding. Here is the CSS:

CSS

#wrapper {
  width: 640px;
  margin: 0 auto;
  position: relative;
}

#textbox {
  margin-top:50px;
  background-color: lightgrey;
  position: absolute;
  width: 300px;
  height: 400px;
  opacity: 0.8;
  top: -12px;
  left: 35px;
  text-align: center;
  border: 2px solid silver;
}

#content {
  padding: 100px 30px;
}

RESULT

Conclusion

As you can see learning how to add a transparent text box over an image using CSS is very easy to understand with minimal code and no JavaScript. Doing this on your websites can really make your message stand out. Try it for yourself and see.