0

I'm trying to take this as a CSS background on a div, but I'd like to have the image start fading in to the background at around 200px like this (black background used for example). Is there a CSS only method of doing this?

I plan on wrapping this project in NodeWebkit, so as long as it works in Chrome I'm not worried about other browsers.

Thanks in advance!

HTML:

<div class="profileBox">
  ...
</div>

CSS:

.profileBox {
  background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
  background-repeat: no-repeat;
  width: 300px;
}
Improve this question
3
  • You cannot affect the opacity of a background image. You could add a linear-gradient on top of the image (as a second background) and fade that in/out Commented Feb 24, 2015 at 17:28
  • 2
    .profileBox: { or .profileBox { ?? Commented Feb 24, 2015 at 17:33
  • @Paulie_D This is easy with pseudo elements. Commented Feb 24, 2015 at 17:41

3 Answers 3

Reset to default
2

Try this solution, no modification of your HTML is required and not JS.

Basically you can create your gradient using -webkit-linear-gradient adding property url for your image.

http://jsfiddle.net/0kj8t1zq/6/

<div class="profileBox"></div>

.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;    
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I think you inadvertently deleted background: -m in your code. The entire line isn't necessary though; no version of IE uses the -ms- prefix for linear gradients.
If that's what you want, you should type the background: -m back in! Anyway, the consumer preview? Is that still in use anywhere?
Sorry....Are you sure IE prefix -m is right in this occasion? Please have a look here sitepoint.com/web-foundations/vendor-specific-properties
1

You have already answers to fade it to black.

If you want to fade it to transparent, you need masking. It doesn't have much support, but it works in Chrome

.profileBox {
  background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
  background-repeat: no-repeat;
  width: 300px;
  height: 400px;
  -webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
  border: solid 2px white;
}

body {
  background-color: blue;  
}
<div class="profileBox"></div>

Changed body background to blue to see it is really transparent

Improve this answer

3 Comments

Just a note for OP: -webkit-mask-image This feature is non-standard, please read here: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image
@GibboK The OP specifically states that it's ok if it works only in Chrome
This one turned out to be the best bet for what I was doing. Thanks!
0

For the fade effect, you can use rgba in webkit-gradient.

To get an image AND a gradient as background you can play with opacity. But there is no CSS property background-opacity, so you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it (source).

.profileBox {
  width: 300px;
  height: 300px;  
  display: block;
  position: relative; 
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /*   Opera 11.10+ */
  background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}

.profileBox::after {
  content: "";
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  background-repeat: no-repeat;
  background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg); 
}
  
<div class="profileBox">

</div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.