CODEWITHSUNDEEP
htmlcssimage
user3117575
user3117575

Reputation:

Make background-color overlap background-image without extra HTML

Today I'm wondering on how I can get background-color to overlap background-image when using rgba, with a lower opacity value. But when I try this in FireFox, the image overlaps the color. I'll show you (below) exactly what I tried:

div {
   background-image: url("http://placehold.it/300x300");
   background-color: rgba(0,0,200,0.5);
}

I'd like it to give a blue tint over the image, but it just shows the background and no blue at all... Here is a image result of the div:

enter image description here

But the desired effect should look like this (below):

enter image description here

How would I get this desired effect without using any extra HTML in the process?

EXTRA

JSFiddle

Upvotes: 1

Views: 3411

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

You can use the :before or :after pseudo-element for the color.

#result {
  background-image: url("http://placehold.it/300x300");

  /* Other stuff */
  width:300px;
  height:300px;
  position: relative;
}

#result:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,200,0.5);
}

Fiddle

Upvotes: 4

Related Questions