Change brightness of JUST the background with CSS

Question

I want to change the brightness of a DIV's background, without affected the other contents in a div.

When I apply a hover brightness filter on the div, other elements in it are also affected. Which I do not want.

The other solution I have is simply replacing the background of the div with a photo edited one. But that asks for double the storage, which I do not like.

Is there a way to change just the brightness of the background-image?

JSFIDDLE

    <div id="replace">
    <div id="transparent">
        <span id="text">Random unaffected text</span>
    </div>
</div>

    <div id="brightnessfilter">
    <div id="transparent">
        <span id="text">Random AFFECTED text (it glows)</span>
    </div>
</div>

#replace {
width:700px;
height:465px;
background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter {
    width:700px;
    height:465px;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover {
     -webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter:  brightness(1.3);
-ms-filter:  brightness(1.3);
}

#transparent {
    position:relative;
    top:400px;
    width:700px;
    height:65px;
    background-color:rgba(0,0,0,.5);
    border-radius:8px;
}

#text {
    color:white;
    font-weight:bold;
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
}

#replace:hover {
    background-image:url('http://i40.tinypic.com/2cft7dl.jpg');
}

Above here is a link to a fiddle with my two attempts at creating the desired effect. But both have a disadvantage in using it.

Thanks in advance!

Fisken

not without some non-semantic HTML – Cavuoto

Answer 1

To apply the brightness to only the background image, you can place the image in a absolute positioned div so that the brightness only affects this element.

Setting the height and width to 100% on the new #image div will allow it to fill #brightnessfilter div in order to preserve the layout from your initial example.

#brightnessfilter {
  width: 700px;
  height: 465px;
  position: relative;
}

#image {
  background-image: url('http://i42.tinypic.com/351dff5.jpg');
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#brightnessfilter:hover #image {
  -webkit-filter: brightness(1.3);
  -moz-filter: brightness(1.3);
  -o-filter: brightness(1.3);
  -ms-filter: brightness(1.3);
}

#transparent {
  position: relative;
  top: 400px;
  width: 700px;
  height: 65px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 8px;
}

#text {
  color: white;
  font-weight: bold;
  position: relative;
  top: 9px;
  left: 9px;
  font-size: 16px;
}

#replace:hover {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.01) 100%), url('http://i40.tinypic.com/2cft7dl.jpg');
}

<div id="brightnessfilter">
  <div id="image"></div>
  <div id="transparent">
    <span id="text">Random AFFECTED text (it glows)</span>
  </div>
</div>

Lactiferous

Answer 2

Thanks for all the help. But off course right after I posted this I came upon an idea.

I use css to change the entire divs content to brightness 1.3 and than I change the text's brightness to 0.8 to even it out.

Like this:

JSFIDDLE

<div id="brightnessfilter">
    <div id="transparent">
        <span id="text">Random AFFECTED text (it glows)</span>
    </div>
</div>

#brightnessfilter {
    width:700px;
    height:465px;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');

}

#brightnessfilter:hover {
     -webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter:  brightness(1.3);
-ms-filter:  brightness(1.3);
}

#brightnessfilter:hover #text {
     -webkit-filter: brightness(0.8);
-moz-filter: brightness(0.8);
-o-filter:  brightness(0.8);
-ms-filter:  brightness(0.8);
}

#transparent {
    position:relative;
    top:400px;
    width:700px;
    height:65px;
    background-color:rgba(0,0,0,.5);
    border-radius:8px;
}

#text {
    color:white;
    font-weight:bold;
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
}

I just dont know the correct number 0.7 seems less bright than normal 0.8 seems little to bright.

Fisken

I would not say that that's a really flexible approach... What if you add any other elements inside that box? You will be applying the filter to each new component separatly as well? What's about changes? To apply changes on every of those again? – Christalchristalle

True, But the content will always be the same. Only the background image and text will change over time. but the ammount of elements will never change in this case. – Fisken

What's the problem with the easy approach I've suggested here: https://mcmap.net/q/711252/-change-brightness-of-just-the-background-with-css? You want to use filter so much? he he – Christalchristalle

I dislike the kind of colors you receive using a gradient. I like the colors you get from a brightness filter the most. – Fisken

Answer 3

Option 1: Try to make a white background image separately and replace its image on the hover effect.

option 2: the content of the background image tries to set it using position: absolute.

Winglet

Answer 4

Below is how I did my background to give it a nice orange glow, maybe you can do something similar to give your image some brightness?

body {
  background: linear-gradient(
      90deg,
      rgba(255, 140, 0, 0.459) 4%,
      rgba(196, 209, 8, 0.616) 53%,
      rgba(255, 132, 0, 0.692) 100%
    ),
    url(img/sunset1.jpg);
  background-size: cover;
  overflow-y: hidden;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}

Witwatersrand

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sidereal

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Wellhead

Answer 5

It is possible by using pseudo-elements. You must assign background to pseudo-elements and fill whole element by that.

#brightnessfilter {
    position:relative;
    width:700px;
    height:465px;
}

#brightnessfilter:before{
    display:block;
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');
}

#brightnessfilter:hover:before {
     -webkit-filter: brightness(1.3);
    -moz-filter: brightness(1.3);
    -o-filter:  brightness(1.3);
    -ms-filter:  brightness(1.3);
}

Expectorate

Answer 6

I Used this tricks for my self

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://assets.digitalocean.com/labs/images/community_bg.png"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity

Chaise