CODEWITHSUNDEEP
htmlcssopacity
user3326523
user3326523

Reputation:

How to darken a background using CSS?

I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any 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');

Upvotes: 158

Views: 349906

Answers (12)

Mulaga
Mulaga

Reputation: 142

You can use backdrop-filter: brightness(50%);

Warning:

  • "Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent".

html, body {
  height: 100%; 
  margin: 0;
}

body, .page-container, .image-container, .back-drop {
  display: flex;
  flex: 1 1;
  gap: 25px;
}

.page-container {
  padding: 20px;
} 

/* Relevant Part */
.image-container {
  background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg');
}

/* Relevant Part */
.back-drop {
  backdrop-filter: brightness(50%);
}

.back-drop:after {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    content: 'this is a backdrop';
    color: cyan;
    font-weight: bold;
    font-size: 28px;
}
<div class="page-container">
  <div class="image-container">
   <div class="back-drop">
   </div>
  </div>
  
  <div class="image-container">
  </div>
</div>

Upvotes: 5

Iman khayati
Iman khayati

Reputation: 1

I tried using background-blend-mode for this:

 <div
    class="dark-background w-screen px-24"
    style="
      background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdevx.work%2Fblog%2Fwp-content%2Fuploads%2F2021%2F03%2FLOUNGE-01-1920x1024.jpg&f=1&nofb=1&ipt=bc89ea53d39a8da6df1ca59ed5daba3155d44fa3627e5071448aecd5da8be808&ipo=images');
      background-color: gray;
      background-blend-mode: multiply;
      background-attachment: fixed;
      height:100vh;
      width:100vh;
      color:white;
    "
  >Here is a text !! :) </div>

Upvotes: 0

shin
shin

Reputation: 3659

Just add this code to your image css

 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(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

Reference: linear-gradient() - CSS | MDN

UPDATE: Not all browsers support RGBa, so you should have a 'fallback color'. This color will be most likely be solid (fully opaque) ex:background:rgb(96, 96, 96). Refer to this blog for RGBa browser support.

UPDATE 2023: All modern browsers now supports RGBa : caniuse link

Upvotes: 304

EltonFaust
EltonFaust

Reputation: 3

Based on Alex Price's answer I made an scss mixin:

@function decToHex($dec) {
    $dec: round($dec);
    $hex: "0123456789ABCDEF";
    $first: (($dec - $dec % 16)/16)+1;
    $second: ($dec % 16)+1;
    @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second);
}

@mixin darken-bg ($darkAmount) {
    $filterHex: decToHex(255 * $darkAmount);
    background: -moz-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: -webkit-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='##{$filterHex}000000', endColorstr='##{$filterHex}000000',GradientType=0 )");
}

/* usage */
.some-div {
    @include darken-bg(0.2);
}

decToHex based on Pierpaolo Cira answer

Upvotes: 0

Harindu Lakshan
Harindu Lakshan

Reputation: 25

This is the easiest way I found

  background: black;
  opacity: 0.5;

Upvotes: -1

curtybear
curtybear

Reputation: 1548

Use an :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

Upvotes: 22

user10517774
user10517774

Reputation:

Setting background-blend-mode to darken would be the most direct and shortest way to achieve the purpose however you must set a background-color first for the blend mode to work.
This is also the best way if you need to manipulate the values in javascript later on.

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;

Can I use for background-blend

Upvotes: 36

Trung
Trung

Reputation: 2019

when you want to brightness or darker of background-color, you can use this css code

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

Upvotes: 32

Daniel Sokolowski
Daniel Sokolowski

Reputation: 12488

For me the filter/gradient approach didn't work (perhaps due to the existing CSS) so I have used :before pseudo styling trick instead:

.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;
}

Upvotes: 2

user7234396
user7234396

Reputation:

It might be possible to do this with box-shadow

however, I can't get it to actually apply to an image. Only on solid color backgrounds

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>

Upvotes: 8

Alex Price
Alex Price

Reputation: 83

Just to add to what's already here, 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 of a 70% linear-gradient overlay. To brighten the image, you can change all those 0,0,0's into 255,255,255's. If 70% is a bit much, go ahead and change the .7. And, for future reference check out this: http://www.colorzilla.com/gradient-editor/

Upvotes: 2

Yooz
Yooz

Reputation: 2518

You can use a container for your background, placed as 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;
}

Upvotes: 2

Related Questions