A very common and stylistic trend in web design is to overlay text over top an image. We do this quite often and have developed several different methods for achieving this type of layout. For tutorial purposes we chose one of our more commonly used methods and made it as basic as possible so it was easy to follow. Remember depending on your skill level you can take the base code we provide then modify and adapt it according to your needs. In this tutorial we will teach you how to center position text over an image with a color overlay using pure CSS3.

Step 1: Setting up the Main DIV with a Background Image

In the first step we will set up the main DIV and apply a background image to it that will resize to fit using the CSS3 background property. For tutorial purposes we are going to use a set width and height but depending on your skill level you can adapt this code to be used responsively.

HTML

<div class=”image”></div>

CSS

.image{ 
width: 600px; 
height: 400px; 
float: left;
background-color: #000;
background-image: url(path to image);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
position: relative; 
overflow: hidden; 
}

Items to Note:

• Adjust your width and height accordingly or change it to behave responsively.
• Don’t forget to add the actual path to your background image.
• If you are creating dynamic content you may need to apply your background image directly to the HTML.

Step 2: Creating the Image Overlay with a CSS3 Pseudo Class

In the second step we are going to use the CSS3 pseudo class ‘::before’ in order to create our color overlay to help separate the text from the image.

CSS

.image::before{
content: '';
display: block; 
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000; 
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
z-index: 1;
}

Items to Note:

• Change the color of the overlay by adjusting the background element.
• We typically normally set our background opacity at 25% (0.25); you can adjust the opacity level to suit your needs.
• The z-index is important to make sure it is lower than the z-index of the overlaying text so that the overlay doesn’t overlap the text.

Step 3: Adding and Positioning our Overlay Text using CSS3 Transform

In the third and final step we are going to add our text as an H2 tag and position it dead center over the image using the CSS3 transform technique.

HTML

<div class=”image”>
  <h2>Overlay Text</h2>
</div>

CSS

.image h2{
width: 80%;
display: block;
position: absolute; 
top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%);
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size: 60px; 
font-weight: bold;
color: #fff;
line-height: 70px;
text-align: center; 
margin: 0; 
z-index: 9;
}

Items to Note:

• We use 80% width on our absolute positioned element to ensure it doesn’t touch the sides; you can adjust this to your liking.
• You can change the H2 tag to anything you want.
• We used a basic browser wide font for tutorial purposes; don’t forget to change the font family, style, and sizing to match your site’s style.
• The z-index is important to make sure it is higher than the z-index of the overlay in Step 2 so that it doesn’t overlap the text.

Full Code

HTML

<div class=”image”>
  <h2>Overlay Text</h2>
</div>

CSS

.image{ 
width: 600px; 
height: 400px; 
float: left;
background-color: #000;
background-image: url(path to image);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
position: relative; 
overflow: hidden; 
}
.image::before{
content: '';
display: block; 
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000; 
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
z-index: 1;
}

.image h2{
width: 80%;
display: block;
position: absolute; 
top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%);
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size: 60px; 
font-weight: bold;
color: #fff;
line-height: 70px;
text-align: center; 
margin: 0; 
z-index: 9;
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.