Change brightness of JUST the background with CSS

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!

asked Nov 4 '13 at 17:20

user2953063

162148

not without some non-semantic HTML

– PlantTheIdea
Nov 4 '13 at 17:23

add a comment |

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!

asked Nov 4 '13 at 17:20

user2953063

162148

not without some non-semantic HTML

– PlantTheIdea
Nov 4 '13 at 17:23

add a comment |

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!

asked Nov 4 '13 at 17:20

user2953063

162148

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!

html css background brightness

asked Nov 4 '13 at 17:20

user2953063

162148

asked Nov 4 '13 at 17:20

user2953063

162148

asked Nov 4 '13 at 17:20

user2953063

162148

asked Nov 4 '13 at 17:20

user2953063

162148

asked Nov 4 '13 at 17:20

user2953063

162148

not without some non-semantic HTML

– PlantTheIdea
Nov 4 '13 at 17:23

add a comment |

not without some non-semantic HTML

– PlantTheIdea
Nov 4 '13 at 17:23

not without some non-semantic HTML

– PlantTheIdea
Nov 4 '13 at 17:23

add a comment |

1 Answer
1

active

oldest

votes

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.

answered Nov 4 '13 at 17:46

user2953063

162148

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?

– Agat
Nov 4 '13 at 17:49

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.

– user2953063
Nov 4 '13 at 17:54

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

– Agat
Nov 4 '13 at 17:58

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

– user2953063
Nov 4 '13 at 18:43

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19773309%2fchange-brightness-of-just-the-background-with-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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.

answered Nov 4 '13 at 17:46

user2953063

162148

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?

– Agat
Nov 4 '13 at 17:49

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.

– user2953063
Nov 4 '13 at 17:54

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

– Agat
Nov 4 '13 at 17:58

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

– user2953063
Nov 4 '13 at 18:43

add a comment |

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.

answered Nov 4 '13 at 17:46

user2953063

162148

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?

– Agat
Nov 4 '13 at 17:49

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.

– user2953063
Nov 4 '13 at 17:54

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

– Agat
Nov 4 '13 at 17:58

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

– user2953063
Nov 4 '13 at 18:43

add a comment |

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.

answered Nov 4 '13 at 17:46

user2953063

162148

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.

answered Nov 4 '13 at 17:46

user2953063

162148

answered Nov 4 '13 at 17:46

user2953063

162148

answered Nov 4 '13 at 17:46

user2953063

162148

answered Nov 4 '13 at 17:46

user2953063

162148

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?

– Agat
Nov 4 '13 at 17:49

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.

– user2953063
Nov 4 '13 at 17:54

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

– Agat
Nov 4 '13 at 17:58

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

– user2953063
Nov 4 '13 at 18:43

add a comment |

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?

– Agat
Nov 4 '13 at 17:49

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.

– user2953063
Nov 4 '13 at 17:54

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

– Agat
Nov 4 '13 at 17:58

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

– user2953063
Nov 4 '13 at 18:43

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?

– Agat
Nov 4 '13 at 17:49

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.

– user2953063
Nov 4 '13 at 17:54

What's the problem with the easy approach I've suggested here: stackoverflow.com/a/19773431/691660? You want to use filter so much? he he

– Agat
Nov 4 '13 at 17:58

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

– user2953063
Nov 4 '13 at 18:43

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu