html - Want to create a transparent color overlay over background image but want everything infront of overlay -
basically, want background, transparent overlay, , of content brought front. far have
#overlay{ position:absolute; left:0; right:0; top:0; bottom:0; background-color:grey; opacity:0.5; }
and have <div id="overlay">
surrounding in html document. in advance.
i use thepios answer use :before
rid of unnecessary overlay div:
body { width: 100%; height: 100%; } .content { position: relative; width: 500px; height: 500px; background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg'); background-size: cover; padding: 50px; } .content:before{ content: ' '; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .inner-content { width: 250px; height: 250px; padding: 20px; background-color: #ffffff; color: #000000; position: absolute; }
<div class="content"> <div class="inner-content">your inner content</div> </div>
Comments
Post a Comment