Linear Gradients not working with javascript

Question

I have this, it worked before if I set the background and put the linear gradient inside the data-src, but when I changed it to this so that it would support more browsers, it isn't working anymore. The background gets set to an image but the gradient isn't showing up. The message that gets sent to the console is

linear-gradient(to top, rgba(2, 0, 36, .8) 0%, rgba(0, 0, 0, 0) 100%), url( '/static/images/mountain.jpg');

var url = "url( '" + slide.dataset.src + "')";

slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
  var direction = slide.dataset.lindir;
  var linstart = slide.dataset.linstart;
  var linend = slide.dataset.linend;

  var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";

  if (!(url == null)) {
    gradient += (", " + url);
  }

  gradient += (";");

  console.log(gradient);
  slide.style.background = "-moz-" + gradient;
  slide.style.background = "-webkit-" + gradient;
  slide.style.background = gradient;
}

<div class="content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}">

You should use the += operator in the last two assignments of slide.style.background — mttetc, Aug 07 '20 at 23:11
@Hisato no, we should not use += We need to remove the first two since they are useless. — Temani Afif, Aug 07 '20 at 23:19
I know, they're useless, but if he really wanted it to have these 3 lines, it couldn't work as it is. — mttetc, Aug 10 '20 at 08:20

cjl750 · Accepted Answer · 2020-08-08T00:36:15.847

7

The root problem is that you don't need the semicolon you are adding because you are setting the style in JavaScript, not adding a style to a stylesheet. I've commented that out below, and you can see that it works.

As others have pointed out, you are also doing your vendor prefixes incorrectly. See Setting vendor-prefixed CSS using javascript for more info on that topic.

Note, though, that support for multiple CSS backgrounds goes back to IE 9, so you probably don't need prefixes at all.

One thing to note is that since you are not setting any other background properties in your JS besides the background-image it would probably be best to use style.backgroundImage throughout instead of switching to style.background. This will let you control the other properties included in the background shorthand in your stylesheet.

var slide = document.querySelector('.slide');

var url = "url( '" + slide.dataset.src + "')";

slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
  var direction = slide.dataset.lindir;
  var linstart = slide.dataset.linstart;
  var linend = slide.dataset.linend;

  var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";

  if (!(url == null)) {
    gradient += (", " + url);
  }

  //gradient += (";");

  console.log(gradient);
  slide.style.MozBackground = gradient;
  slide.style.WebkitBackground = gradient;
  slide.style.background = gradient;
}

.slide {
  width: 300px;
  height: 300px;
}

<div class="slide content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}"></div>

edited Aug 08 '20 at 00:36

answered Aug 07 '20 at 23:20

cjl750

4,380
3
15
27

1

@AxelAldrich I didn't downvote you. Your original answer only said that OP needed to use `background-image` instead of `background`, which wasn't actually the issue. Now that you've updated your answer, it's more helpful. You are right about the style being partially overwritten and `background-image` being more helpful, but your answer doesn't explain that very clearly right now, in my opinion. If you would update your answer, I would upvote you. I will be updating mine. – cjl750 Aug 08 '20 at 00:26
@AxelAldrich it's not unusual that you might catch a downvote from someone who sees the question and your answer when it is still missing info and then moves on before seeing your edit. Best to try to get your answer as complete as possible from the start. And if your answer is actually incorrect, well, that's the whole reason downvotes exist :) – cjl750 Aug 08 '20 at 00:41
As for this question in particular, my own testing (on CodePen) showed that even when you use `background` as in OP's code instead of `background-image`, then visual result is as expected, even if the other background is still technically there. So saying "you need to" use `background-image` is, for practical purposes, incorrect, though there's other reasons it's a good idea (which I've updated my post with). – cjl750 Aug 08 '20 at 00:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219439/discussion-between-cjl750-and-axel-aldrich). – cjl750 Aug 08 '20 at 00:54
that semicolon was my issue aswell...thank you so much for this answer – Avi E. Koenig Feb 03 '21 at 19:34

Linear Gradients not working with javascript

1 Answers1