Background image, gradient and image with opacity?

Asked Jun 13 '17 at 19:59

Active Jun 13 '17 at 19:59

Viewed 333 times

I´ve got the blendmode to work on the background image however I'd like to have a more transparent image. Is there a way (beside lighten the BG image-itself which will cause a different "blend") to give opacity to the image?

I´ve added the code here.

body{
  margin:0;
  padding:0;
  font-family: 'Roboto', sans-serif;
  background-blend-mode: overlay;
  background-image: url(http://mortenhjort.dk/bglow.jpg), linear-gradient(to left top, rgba(55, 236, 186, .5) 0%, rgba(114, 175, 211, .5) 100%);

  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100vw;
}

asked Jun 13 '17 at 19:59

Morten Hjort

take a look here: https://jsfiddle.net/n5qfa/89/ – tech2017 Jun 13 '17 at 20:03
what ways have you tried so far and why did they fail? – Martin Jun 13 '17 at 20:04
@tech2017 a quick hit to your jsfiddle bookmarks eh? `;-)` – Martin Jun 13 '17 at 20:05
@Martin i created this jsfiddle few days back, answered similar question. – tech2017 Jun 13 '17 at 20:07
What is the final idea? Is it also to see partially an HTML background ? have you tried setting gradient on top of image instead without blending ? https://codepen.io/anon/pen/XgKLQB if yes, what goes wrong for you then ? – G-Cyrillus Jun 13 '17 at 20:11
@GCyrillus: It doesn't use the blend-mode which can give a nice effect, but I agree a simple gradient-overlay is a ok plan b. – Morten Hjort Jun 13 '17 at 20:21
1

Would using pseudo elements and mix-blend-mode help: https://jsfiddle.net/grzpq80j/ – Asons Jun 13 '17 at 21:34

Background image, gradient and image with opacity?

0 Answers0