1

I'm trying to apply a gradient effect around a background image but I just can't get close. I can figure out how to apply a gradient to the bottom of the image. Can anyone help?

Current code: 

body {
  background: black;
}

.backgroundImg {
  position: absolute;
  top: 0px;
  left: 0px;
  size: contain;
  width: 1000;
  height: 10;
  z-index: 1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)))
}
<div class="container">
  <img src="http://image.tmdb.org/t/p/w1000/dpo7WDOhWtACY6oflrqxutbhg81.jpg" class="backgroundImg">
</div>

Expected Result: Expected result

Wand Maker
  • 18,476
  • 8
  • 53
  • 87
JulianJ
  • 1,259
  • 3
  • 22
  • 52
  • Whats the problem? I can see the gradient. – Paran0a Nov 26 '15 at 20:37
  • I don't think I made myself clear enough. I want the gradient to surround the image. – JulianJ Nov 26 '15 at 20:47
  • Can you create a screenshot of how you want it to look? I find it different to visualise a gradient around something that is in the very top left corner. Also, you have errors in your CSS: the `width` and `height` properties lack units. And `-webkit-mask-image` works only in Chromium. – Mr Lister Nov 28 '15 at 10:38
  • Something like this. – JulianJ Nov 28 '15 at 11:03

1 Answers1

3

You're looking for: -webkit-radial-gradient();

For more info see: CSS Visual Effects Guide

Example:

body {
  background: black;
}
.backgroundImg {
  position: absolute;
  top: 0px;
  left: 0px;
  size: contain;
  width: 1000;
  height: 10;
  z-index: 1;
  -webkit-mask-image: -webkit-radial-gradient(white, transparent 80%);
}
<div class="container">
  <img src="http://image.tmdb.org/t/p/w1000/dpo7WDOhWtACY6oflrqxutbhg81.jpg" class="backgroundImg">
</div>
Berendschot
  • 3,026
  • 1
  • 21
  • 43
  • Related: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients?rq=1 – Berendschot Nov 28 '15 at 11:14