CODEWITHSUNDEEP
css
Josh
Josh

Reputation: 31

Darken image in the background

Is there any way to darken a .png image? I have one as a background image, but it does not cover the whole container, if I set overlay to darken it.

.overlay {
    background-color: #322D36 ;
     bottom: 0;
     left: 0;
     opacity: 0.5;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
}

It's also visible outside of the image space. Is there any way how to darken only image?

demo

Upvotes: 1

Views: 156

Answers (3)

Bariq Dharmawan
Bariq Dharmawan

Reputation: 820

you can using background-color after background-image property, and using background-blend-mode property for overlay the background-image. Here is the example

https://codepen.io/anon/pen/PQOejG?editors=1100

Upvotes: 0

GMchris
GMchris

Reputation: 5648

You could use the (not super supported) filter property like so.

filter: brightness(0.4);

Some prefixes such as -webkit- may be needed.

Here's a fiddle.

EDIT because of comment:

Make the container the width and height of your image, then add the image using the before pseudo class.

.container {
  position: relative;
  width: ###;
  height: ###;
}

.container:before {
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  position: absolute;
  z-index: 1;
  background-image: some-url;
  -webkit-filter: brightness(0.4);
}

.content {
  position: relative;
  z-index: 10;
}

Put all your text in the .content div.

Upvotes: 2

Francisco Romero
Francisco Romero

Reputation: 13199

You can use a linear-gradient to your background.

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7) ), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");

Updated JSFiddle.

Here another JSFiddle in which you can see that only the background will be dark and the rest of elements will be normal.

Upvotes: 0

Related Questions