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
– mttetc, Commented Aug 7, 2020 at 23:11
@Hisato no, we should not use += We need to remove the first two since they are useless. — Temani Afif
– Temani Afif, Commented Aug 7, 2020 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
– mttetc, Commented Aug 10, 2020 at 8:20

cjl750 · Accepted Answer · 2020-08-08 00:36:15Z

9

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 8, 2020 at 0:36

answered Aug 7, 2020 at 23:20

cjl750

4,7093 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

cjl750 Over a year ago

@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 Over a year ago

@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 Over a year ago

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 Over a year ago

Let us continue this discussion in chat.

Avi E. Koenig Over a year ago

that semicolon was my issue aswell...thank you so much for this answer

|

Collectives™ on Stack Overflow

Linear Gradients not working with javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related