CSS color background over image

Question

EDIT: Extremely important thing I forgot to mention, I can't edit the base html, only the css. This is for a reddit stylesheet.

I want to have a semi-transparent color background over an image background as a tint. Here's what I've tried: This just shows the image:

background: url(image) no-repeat, rgba(0,0,0,0.5);

This shows the image and breaks its scaling (background-size: 100%;):

background: rgba(0,0,0,0.5), url(image) no-repeat;

This makes the background entirely black, with the transparency fading to whatever's behind it instead of the image:

background-image: url(image) no-repeat;
background: rgba(0,0,0,0.5);

This once again shows just the image, and breaks the scaling:

background-image: url(image) no-repeat;
background-color: rgba(0,0,0,0.5);

This shows just the image without breaking the scaling:

background: url(image) no-repeat;
background-color: rgba(0,0,0,0.5);

I tried using @Trevan 's answer with no luck too:

#header:lang(dd) {
    position: relative;
    background: url(%%HexBackground%%) no-repeat;
}

#header:lang(dd)::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

I'm probably doing it wrong though.

Answer 1

Might not be applicable depending on what exactly you want to do (suggest JSFiddle) but you should have a look at SVG filters:

http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 2

CSS-only: box-shadow

See a basic example here http://jsfiddle.net/vyo168gg/1/

div {
    width: 500px;
    height: 300px;
    background: url(image) no-repeat;
    box-shadow: 0px 5000px 0px rgba(256, 0, 0, 0.5) inset;
}

Basically, instead of having the box shadow showing on the outside of the element, we put it on the inside.

The trick is to have the first or second parameter(?) to be larger than the elements width/height so that it overlaps the whole image.

Answer 3

What I would probably do is use a pseudo element positioned absolutely on top of the element with the background.

.example {
    position: relative;
    background: url(image) no-repeat;
}

.example::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

Answer 4

Overlay a div on top of your image, maybe something like this?

HTML

 <div class="picContainer">
    <div class="picContainerTint"></div>
    <img src="http://rdjpg.com/300/200"/>
 </div>

CSS

.picContainer {
    height: 200px;
    width:300px;
    position:relative;
}

.picContainerTint {
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    z-index:2;
}

JSFIDDLE

Answer 5

What you need to do is separate the transparency from the background. Doing something like following should work:

HTML

<div class="background"> <div class="tint"></div> </div>

CSS

.background{
    background: url(image) no-repeat;
    position: relative;
}
.tint{
    background: url(transparent-image);
    height: 100%;
    position: absolute;
    width: 100%;
}

You can use a color and opacity for the tint, but not all browsers acknowledge that property(IE8).

Answer 6

Something like this?

What we're doing here is using an :after pseudo element to give you the desired effect of having an overlaid image tint without muddying up the DOM.

The benefits to doing it this way as opposed to others are

1. You don't insert display-only elements into the document, keeping it content focused (as it should be!)
2. This allows you to keep all hover elements on the actual div with the image as opposed to the needing to introduce unnecessarily complex CSS selectors. These can actually slow down your site, believe it or not
3. There's no risk of z-index issues as the stacking context is kept within the div itself. This might seem minor, but can be a huge PITA if you're trying to support IE6 or 7.

Enjoy!

.my-totally-cool-image-tint {
  background-image: url(http://rawmultimedia.files.wordpress.com/2012/03/totally-cool-crazy-epic-2.jpg);
  background-size: cover;
  height: 400px;
  width: 600px;
  position: relative;
}
.my-totally-cool-image-tint:after {
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(12, 218, 255, 0.5);
  transition: 0.2s ease-out 0.5s;
  opacity: 1;
}

.my-totally-cool-image-tint:hover:after {
  opacity: 0;
  transition: 1s ease-out;
}

<div class="my-totally-cool-image-tint">
  
  </div>