CODEWITHSUNDEEP
cssimagebackgroundtint
Spekular
Spekular

Reputation: 99

CSS color background over image

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.

Upvotes: 0

Views: 825

Answers (6)

gvee
gvee

Reputation: 17161

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.

Upvotes: 2

Jon
Jon

Reputation: 2671

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).

Upvotes: 0

Josh Burgess
Josh Burgess

Reputation: 9567

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>

Upvotes: 0

mituw16
mituw16

Reputation: 5250

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

Upvotes: 0

Trevan Hetzel
Trevan Hetzel

Reputation: 1369

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

Upvotes: 1

marblewraith
marblewraith

Reputation: 778

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/

Upvotes: 0

Related Questions