Background image and complex gradient on Chrome mobile

Question

According to this answer, this should work:

#shop {
    background-image: url('../images/tilecovers/shop.jpg'),
    linear-gradient(
            135deg,
            rgba(228,245,252,0.18) 0%,
            rgba(191,232,249,0.2) 49%,
            rgba(191,232,249,0.21) 65%,
            rgba(159,216,239,0.21) 73%,
            rgba(82,189,236,0.22) 100%); 
}

It doesn't work though, only the image is visible.

After a few refreshes, I noticed the gradient is loading first, then the image on top of it. How can I make the translucent gradient on top of the background image?

score 1 · Answer 1 · answered Jun 14 '17 at 15:36

Use :before to apply the filter. Like so:

#shop {
  width: 350px;
  height: 150px;
  background: url("http://via.placeholder.com/350x150") center center no-repeat;
}
#shop:before {
  width: 350px;
  height: 150px;
  content: '';
  position: absolute;
  background-image: linear-gradient( 
      135deg,
            rgba(228,245,252,0.18) 0%,
            rgba(191,232,249,0.2) 49%,
            rgba(191,232,249,0.21) 65%,
            rgba(159,216,239,0.21) 73%,
            rgba(82,189,236,0.22) 100%
  );
}

<div id="shop">
</div>

Obviously this works, but it is not working for me. The only difference being that my element is sized via javascript and not statically sized in the CSS. Could that be the issue? — , Jun 14 '17 at 15:58

I haz kode · Accepted Answer · 2017-06-14T16:02:09.350

1

Not sure about cross browser support but one option is using the background-blend-mode property like so:

.shop {
  background-image: url('https://placeholdit.co//i/500x250?bg=111111'),
linear-gradient(
        135deg,
        rgba(228,245,252,0.18) 0%,
        rgba(191,232,249,0.2) 49%,
        rgba(191,232,249,0.21) 65%,
        rgba(159,216,239,0.21) 73%,
        rgba(82,189,236,0.22) 100%);
  background-blend-mode: overlay;
  width: 500px;
  height: 250px;
}

.shop-no-gradient {
  background-image: url('https://placeholdit.co//i/500x250?bg=111111');
  width: 500px;
  height: 250px;
}

<div class="shop"></div>
<br>
<div class="shop-no-gradient"></div>

edited Jun 14 '17 at 16:02

answered Jun 14 '17 at 15:52

I haz kode

1,587
3
19
39

This worked even with my dynamically sized elements. Thanks! – Jun 14 '17 at 16:00
I did find one issue with this perhaps. Even if I set my gradient to an opacity of 1, you can still see the image behind it. Is there a way around that? – Jun 14 '17 at 16:05
it works exactly like layers in photoshop. if your gradient is opaque and you use 'overlay' you won't see the image because there is a 100% opaque gradient on top of it. It really depends on what colors your working with. Look at the options available for the property and try to find what suits your needs best - https://www.w3schools.com/cssref/pr_background-blend-mode.asp – I haz kode Jun 14 '17 at 16:14
Also please feel free to unselect the answer if it doesn't answer your problem you will properly get more attempts and answers if the question is unsolved. – I haz kode Jun 14 '17 at 16:17
RE: 100% opaque, please see this fiddle: https://jsfiddle.net/scottbeeson/d9jgrbc9/ – Jun 14 '17 at 16:19
The image you're using is throwing an error - page not found. – I haz kode Jun 14 '17 at 16:23

Background image and complex gradient on Chrome mobile

2 Answers2