How To Make A Div With Opacity But Keep The Text Fully Visible

Something I always find myself doing is needing a hero image that has an opacity on it and then put some text inside of the div holding it all together. This is also something that is common when I need to have visible text but do not want the image behind the said div to be obstructed.

When is this used?

– Hero images or Call To Action areas of a site

– A “keep scrolling” area that sits over some graphics or exisitng areas of the design

– Buttons with a transparent type effect

See the Pen text with opacity by taterdev (@wisecodeworks) on CodePen.

What we are seeing here above is the classic we have an image and need some text to overlay it without disturbing the actual image. This can be simple text, a button, or a feature to the object behind it.

Where Is The AwesomeNess?

In this case we breakdown the RGB.

RGB(0,0,255,0.6)

The frist three places define the color, but the 0.6 is the opacity that I am applying to get the desired effect. So really if you look up the rgb color code and then play with the 4th spot you can adjust as needed.

Why Not Use Opacity?

I used to always consider using opacity to accomplish this but then it would affect everything inside the image and really the colors could not be maintained that well. Instead with the power of RGB you can indeed control that color and only on the background while leaving everything else alone. Problems I would have to accomplish this as well as an attempt to take the image in Photoshop and then put the desired opacity on the image/object in question and apply the effect.

CSS Superpowers

I think it is important to remeber we all learn things daily and this CSS thing is at times magic. Jokes aside this really helped me develop better websites by learning this, and for that reason I thought others could find is useful as well.

Basic CSS Template For Page Breaks

Below is just a template for some basic breaks for responsive web development. I find that tossing this into my style sheet is a huge help, and that is why I wanted to put it up.

I will be updating this from time to time just for any updates I run across. I have to say that though these start at 769px it is worth pointing out that having a large media query can also be beneficial when developing if you know your audience. After you get some data on the people coming to the site, or if you do keyword research and find that people in that particular area look at sites like the one your are building on say a tablet instead of desktop, or even if you have Mac users over Windows.

Those specifics can come in handy when wanting to produce the very best experience.


/*ALL MOBILE STYLES BELOW*/
/*desktop*/
@media only screen and (min-width: 769px) {
  body {
    background-color: lightblue;
  }
}

/*Tablet*/
@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}
/*Phone*/
@media only screen and (max-width: 400px) {
  body {
    background-color: lightblue;
  }
}
/*Other*/
@media only screen and (max-width: /*add here*/) {
  
}