Adding CSS Gradient as Background Image Programatically

Question

Why is it that I can define a rule in CSS like this

.red {
    background-color: red;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);
}

and everything works perfectly fine, but when I do this in JS

var red = document.getElementById('red');
red.style.backgroundColor = 'red';
red.style.backgroundImage = 'linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);';

It only seems to work in IE, and not Chrome or Firefox?

How do you get the same behavior when the styles need to be set in JavaScript?

var red = document.getElementById('red');
red.style.backgroundColor = 'red';
red.style.backgroundImage = 'linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);';

div {
  display: inline-block;
  color: white;
  text-align: center;
  text-shadow: 0 1px 5px black;
  font-size: 2em;
  vertical-align: top;
  width: 200px;
  height: 100px;
}
.red {
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
}

<div class="red">
  CSS Styling
</div>
<div id="red">
  Programmatic Styling
</div>

I'm currently running with the following versions:

Firefox 45.0.1
Chrome 49.0.2623.110
IE 11.0.9600.18230

d'oh, I even tried that at first but for some reason it didn't work (at first). — damo-s
– damo-s, Commented Apr 10, 2016 at 0:16

L777 · Accepted Answer · 2023-04-17 14:31:47Z

13

Simply remove the ; from the end of the backgroundImage value on Javascript, which currently is:
linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);

So, in the end, you'll have:

var red = document.getElementById('red');
red.style.backgroundColor = 'red';
red.style.backgroundImage = 'linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%)';

div {
  width: 200px;
  height: 100px;
}
.red {
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
}

<h1>
CSS Styling
</h1>
<div class="red">
</div>
<h1>
Programmatic Styling
</h1>
<div id="red">
</div>

edited Apr 17, 2023 at 14:31

answered Apr 10, 2016 at 0:16

L777

8,5873 gold badges43 silver badges68 bronze badges

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

2 Comments

NanoWizard Over a year ago

-facepalm- Such a rookie mistake on my part. The fact that it was working in IE had me puzzled. Thanks!

florian h Over a year ago

Amazing, I made the exact same mistake and had to find this answer for me to realize…

damo-s · Accepted Answer · 2016-04-10 00:15:45Z

You can do it by using setAttribute instead:

Edit: Oh, or just remove the semicolon in the string as one commentator suggested:

var red = document.getElementById('red');
red.style.backgroundColor = 'red';
red.style.backgroundImage = 'linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%)';

Original answer content (ignore or use at will):

var red = document.getElementById('red');
red.setAttribute('style', 'background-color:red;background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%)');

div {
  display: inline-block;
  color: white;
  text-align: center;
  text-shadow: 0 1px 5px black;
  font-size: 2em;
  vertical-align: top;
  width: 200px;
  height: 100px;
}
.red {
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
}

<div class="red">
  CSS Styling
</div>
<div id="red">
  Programmatic Styling
</div>

Collectives™ on Stack Overflow

Adding CSS Gradient as Background Image Programatically

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related