cssbackgroundtint

How can I tint a background image with CSS?

I have a background image set up through CSS.

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

I plan on having a different background image for different pages of the website: so it's important that text is legible over it. Right now I've got a translucent black background to my #main content box in the middle like this in order to ensure legibility:

#main {
background: rgba(0, 0, 0, 0.5);
}

What I really want to do, though, is to have that kind of translucent background over the entire background image, because the black box looks a bit clunky. I've tried making a <div id=#tint> which includes the whole HTML document and giving rgba(0, 0, 0, 0.5) to #tint, but that doesn't work at all--I can either get nothing to change or I can get the entire background to become a simple grey with no background image visible at all. Is this simply not possible?

Solution

  • I think you need to create an overlay element (potentially div) which has the sought translucent background. Something like:

    .overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

    And of course, a little demo: little link.