Newbe Dev Stack

Answer : Nowadays, it is possible to do it simply with CSS property "background-blend-mode" . <div id="content">Only one div needed</div> div#content { background-image: url(my_image.png); background-color: rgba(255,255,255,0.6); background-blend-mode: lighten; /* You may add things like width, height, background-size... */ } It will blend the background-color (which is white, 0.6 opacity) into the background image. Learn more here (W3S). You can't use transparency on background-images directly, but you can achieve this effect with something like this: http://jsfiddle.net/m4TgL/ HTML: <div class="container"> <div class="content">//my blog post</div> </div>​ CSS: .container { position: relative; } .container:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background-image: url('i...

Answer : Unfortunately the opacity element makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ } The problem with this approach is that some browsers do not understand the rgba format and will not display any border at all if this is the entire declaration. The solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first. div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox ...