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!
Advertisement
Answer
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');