smoothing out transition between blackish image and black background

Question

With the following CSS:

#divPic {
  height: 32pc; 
  background-image:  url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-color: #000000;
  opacity: 1;

}

... I set the image dice.jpg as the background-image of the div with id divPic.

The result is this:

The problem is that the picture doesn't cover the whole range of the frame.

If I change the background-color to blue, you can see which part is covered by the image and which part is not:

I am using background-color black (#000000), so it looks more or less ok but what is annoying me is that, if you look closely, you see the right edge of the image ... i.e. the background-color (#000000) and the color of the image (some slightly different black) do not match perfectly. I tried experimenting with different kind of black (e.g. #000008 instead of #000000, etc.) but you could still see the edge where the image ends and the background-color begins.

My question is therefore: is there some way to smooth out the transition between the image and the background-color so that you don't see the edge anymore?

*************************************UPADTE*********************************

Here's some context:

I'm using bootstrap, the frame for the picture is a bootstrap-column:

       <div id="picContainer" class="row">
            <div class="col-xs-12 thumbnail" id="divPic"></div>
            <div class="col-xs-12" id="button_div"></div> 
       </div>

thank you, thought this was not possible ... updated the question with the link you provided — steady_progress, Jul 23 '17 at 20:02
No problem, it's not straightforward to get the direct link. I deleted the now irrelevant comments. Can you please add the contextual markup for your div(html and other relevant classes)? — I haz kode, Jul 23 '17 at 20:03
Try this https://jsfiddle.net/jbzzogpq/ just focus on the box-shadow property. — I haz kode, Jul 23 '17 at 20:35

Auroratide · Answer 1 · 2017-07-23T21:03:42.113

I don't have enough reputation to make a comment, but have you tried using either #010101 or #020202 as background colors? This is the color of the image at the edge, so choosing either of these will make it look as smooth as possible without needing to apply a transparency gradient to the image or what-have-you.

UPDATE:

If you need an actually smooth transition, you can apply a CSS3 gradient on top of the background image to transition into the color you want. The following JSFiddle has an example of this, using the code below: https://jsfiddle.net/Auroratide/7j8c0v1k/

#divPic {
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, rgba(2, 2, 2, 0) 300px, rgba(2, 2, 2, 1) 400px), url('https://wallpaperscraft.com/image/black_black_white_bone_time_game_noise_74543_4000x2248.jpg');
}

I used this Stack Overflow answer as reference.

You can also try the following JSFiddle where a transparent gradient is applied on top of the image: https://jsfiddle.net/Auroratide/7j8c0v1k/ — Auroratide, Jul 23 '17 at 20:49

smoothing out transition between blackish image and black background

1 Answers1