Photoshop Question posted in
The official user guide can be found here.

Darkening a Background URL image with CSS – Photoshop

I am looking to darken a background url image I have on a header. Does anyone know what I could apply with to get the dark effect shown in the image to the right? or perhaps this can only be created using a Photoshop technique?

enter image description here

I have tried the styles below, but nothing like it

-webkit-filter: grayscale(1); */
filter: grayscale(1);
opacity: 0.5;
Tags:

2

Answers


  1. 0

    You can add some dive with z-index:2, then set the background-color to black, and opacity to 0.5, then set position relative, and set the div to be on the same place as the img, and the same size.

    By this way, You will have some div, which will cover the original foto.

    for example:

    .cover-photo{
background-color:black;
opacity:0.5;
position:absolute or relative - You have to find the best way
top:0;
height: the same as img;
width: the same as img;
}
    Login or Signup to reply.
  2. 0

    You cannot use the filter property on a background image.

    What you CAN do is overlay a second “image” with a dark transparency. A gradient is treated as a background image and so we can leverage the ability to use multiple background images to acheieve this effect.

    body {
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),   
    url(http://www.fillmurray.com/1460/1300);
    background-size: cover;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search