0

I'm currently trying to dynamically change the background gradient of a background with an image. I'm using the following CSS properties to add the image and the gradient.

CSS:

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.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.9))), url('../images/walters.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.9) 100%), url('../images/walters.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.9) 100%), url('../images/walters.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.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.9) 100%), url('../images/walters.jpg') no-repeat;

The code here is pretty much the same with the only exceptions being the cross-browser compatibility. The only thing I would need to change would be the actuall color of the RGBA with 0.9 alpha or the last one within the property (rgba(0, 0, 0, 0.9)).

The actual property should be changed with Javascript when the user picks it from a color picker.

I tried setting the bg image and gradient separately but it does not work with my configuration. I need a solution that will change the background color only while keeping all other parameters

Any help would be great, thanks!

Joe Scotto
  • 10,936
  • 14
  • 66
  • 136
  • 2
    Possible duplicate of [Using JavaScript to edit CSS gradient](http://stackoverflow.com/questions/15071062/using-javascript-to-edit-css-gradient) – Heretic Monkey Feb 21 '17 at 15:03
  • @MikeMcCaughan Not as simple as modifying the gradient. I tried setting the bg image and gradient separately but it does not work with my configuration. I need a solution that will change the background color only while keeping all other parameters. – Joe Scotto Feb 21 '17 at 15:04
  • You need to [edit] your question to include why that duplicate does not solve your problem. You could just read the existing value of the property, change what you need, then write the changed value. Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". – Heretic Monkey Feb 21 '17 at 15:07
  • gradients are considered images, you can't actually separate them. You can put two divs, and give the first a bg image, and the other a gradient. And also, there is no such thing as -ms-linear-gradient. Since [IE 10 it supports](http://caniuse.com/#feat=css-gradients) the standard syntax (no prefixes). – pol Feb 21 '17 at 15:08
  • I have converted your CSS to a snippet, please edit the snippet and show what you are trying to do – sabithpocker Feb 21 '17 at 15:12
  • @sabithpocker I am literally just trying to change the color of the `gradient`, nothing more, nothing less. – Joe Scotto Feb 21 '17 at 15:13
  • I believe that this is, in fact, a duplicate as indicated by @MikeMcCaughan, because I do not believe that there is a way to specifically target the color of a gradient background any more than there is a way to target just the green digits of an RGB background color. – AmericanUmlaut Feb 21 '17 at 15:34

4 Answers4

1

Try the following code

function getCssValuePrefix() {
    var rtrnVal = '';
    var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];

    var dom = document.createElement('div');

    for (var i = 0; i < prefixes.length; i++)
    {
        dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';
        if (dom.style.background)
        {
            rtrnVal = prefixes[i];
        }
    }

    dom = null;
    delete dom;

    return rtrnVal;
}


function changeColor(elm, color) {
    elm.style.background = getCssValuePrefix() + "linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, " + color + " 100%), url('../images/walters.jpg') no-repeat";
}

and call the following function changeColor(element, colorvalue);

Anish Manandhar
  • 21
  • 3
0

I ended up just adding all the css with Javascript. The issue was that there was no positioning being set so adding center fixed my issues.

bottom.css("background", 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("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(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9))), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-moz-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-o-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background-size", 'cover');
Joe Scotto
  • 10,936
  • 14
  • 66
  • 136
0

You cannot control them separately with CSS, but if you make the gradient the same color as your main background (to basically mask the appearance), then you can only change the background-color property and you will get the result you want.

background: linear-gradient(to top, transparent 0%, white 41%, white 100%)

color is the same as your main background from the html,body

Here's a side-by-side comparison:

div {
  height: 150px; width: 200px;
  float: left; margin: 10px;
}
body {background-color: white;}

div.bga { /*your current code*/
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;
}

div.bg { /*change to this*/
  background: linear-gradient(to top, transparent 0%, white 41%, white 100%), url('../images/walters.jpg') no-repeat;
  background-color: rgba(0,0,0,0.9);
}
<div class="bg">gradient color is same as background of the body</div>

<div class="bga">your current one</div>

This method is probably only useful if you don't add a picture, since the gradient will hide most of the image.


Method #2.
You can use a CSS variable which will take the place of the color you want to change.
The variables are normally added to the html (root element), and then used wherever needed.

:root {
  /*define your variables here*/
  --gradient-bg-color: rgba(0,0,0,0.9);
}

div.bg {
  height: 150px;
  background: linear-gradient(to bottom, transparent 0%, transparent 59%, var(--gradient-bg-color) ), url('../images/walters.jpg') no-repeat;
}
<div class="bg"></div>
pol
  • 2,641
  • 10
  • 16
0

You can set the element.style.backgroundImage property to include both an image and a color or gradient separated by commas.

document.body.style.backgroundImage = "url('img_tree.png'), linear-gradient(rgb(0,0,0), rgb(255,255,255))"

Timothy Ryan
  • 189
  • 7