How to darken a background using CSS?

Question

I have an element with text in it. Whenever I decrease the opacity, I decrease the opacity of the WHOLE body. Is there a way I can just make the background-image darker and not everything else?

 background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png'); 

Answer 1

Just add this code to your CSS image.

  body{ background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), /* bottom, image */ url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png); } 

Link: linear gradient () - CSS | MDN

UPDATE: not all browsers support RGBa, so you should have a “fallback color”. This color is likely to be solid (completely opaque), for example: background:rgb(96, 96, 96) . Check out this blog for support for the RGBa browser.

Answer 2

Use: after psuedo-element:

 .overlay { position: relative; transition: all 1s; } .overlay:after { content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.5); opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .overlay:hover:after { opacity: 0; } 

Check out my pen>

http://codepen.io/craigocurtis/pen/KzXYad

Answer 3

Setting background-blend-mode for darken will be the most direct and shortest way to achieve the goal, however, you must first set background-color for the blending mode to work.
This is also the best way if you need to manipulate values ​​later in javascript.

 background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png'); background-blend-mode: darken; 

Answer 4

Perhaps this is possible with box-shadow

however, I cannot get it to actually apply to the image. Solid Backgrounds Only

 body { background: #131418; color: #999; text-align: center; } .mycooldiv { width: 400px; height: 300px; margin: 2% auto; border-radius: 100%; } .red { background: red } .blue { background: blue } .yellow { background: yellow } .green { background: green } #darken { box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7); /*darkness level control - change the alpha value for the color for darken/ligheter effect */ } 

 Red <div class="mycooldiv red"></div> Darkened Red <div class="mycooldiv red" id="darken"></div> Blue <div class="mycooldiv blue"></div> Darkened Blue <div class="mycooldiv blue" id="darken"></div> Yellow <div class="mycooldiv yellow"></div> Darkened Yellow <div class="mycooldiv yellow" id="darken"></div> Green <div class="mycooldiv green"></div> Darkened Green <div class="mycooldiv green" id="darken"></div> 

Answer 5

You can use the container for your background, placed as an absolute and negative z-index: http://jsfiddle.net/2YW7g/

HTML

 <div class="main"> <div class="bg"> </div> Hello World!!!! </div> 

CSS

 .main{ width:400px; height:400px; position:relative; color:red; background-color:transparent; font-size:18px; } .main .bg{ position:absolute; width:400px; height:400px; background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png"); z-index:-1; } .main:hover .bg{ opacity:0.5; } 

Answer 6

To add to existing ones, use the following:

 background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )"); 

... for cross-browser support for 70% linear gradient overlay. To brighten the image, you can change all these 0,0,0 to 255,255,255 . If 70% is small, go and change .7 . And, for future reference, check out this: http://www.colorzilla.com/gradient-editor/

Answer 7

For me, the filter / gradient approach did not work (possibly due to the existing CSS), so I used the trick with the pseudo-style :before :

 .eventBannerContainer { position: relative; } .eventBannerContainer:before { background-color: black; height: 100%; width: 100%; content: ""; opacity: 0.5; position: absolute; display: block; } /* make any immediate child elements above our darkening mask */ .eventBannerContainer > * { position: relative; }