1

I am working on a color picker but i dont know how to add the hex value inside the $(customElements2).css

I have a screen https://image.prntscr.com/image/m52y3J_MQaGlZ_Bi6zc4pw.png

This is not working:

$(customElements2).css('background', 'linear-gradient(rgba(82, 25, 25, 0.45),rgba(249, 55, 55, 0.45),rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)');

$(customElements2).css('background', 'linear-gradient(rgba(82, 25, 25, 0.45),'hex',rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)');

Can anyone explain how to do it?

Tom Lammers
  • 17
  • 5

1 Answers1

0

May be something like that, if i understand you right

var orientation = 'to right';
var colorOne = '#e65c00';
var colorTwo = '#f9d423';
var el= document.getElementById('customElement2');
el.style.backgroundImage = 'linear-gradient('
    + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

Or may be if you have troubles with converting your color to hex check out that question

UPDATE

Oh i understand where the problem was, you cannot use image in linear-gradient. Instead you can do what you want like this

$(customElements2).css('background-image', 'url(../../../images/netpen/logo-bg.png) linear-gradient(rgba(82, 25, 25, 0.45),'hex',rgb(43, 25, 25))');
layonez
  • 1,746
  • 1
  • 16
  • 20
  • i mean i need to replace this: rgba(249, 55, 55, 0.45) to the hex i have tried this $(customElements2).css("background", "linear-gradient(rgba(82, 25, 25, 0.45),"+ hex +",rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)"); but not working – Tom Lammers Aug 17 '17 at 13:13
  • what inside `hex ` variable? – layonez Aug 17 '17 at 13:21
  • You can use `hex` and `rgb` notation in `linear-gradient` property https://codepen.io/anon/pen/RZxJLm check out that pan. May be you forgot to place `#` before your `hex` color? – layonez Aug 17 '17 at 13:27
  • Yes i know but how do i add the hex varble in this line: $(customElements2).css("background", + "linear-gradient(rgba(82, 25, 25, 0.45),rgba(249, 55, 55, 0.45),rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)"); like this $(customElements2).css("background", + "linear-gradient(rgba(82, 25, 25, 0.45),"+ hex +",rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)"); but it is not wotking – Tom Lammers Aug 17 '17 at 13:30
  • that should work, if not check what inside your `hex` variable `var hex = '#f9d423'; $(customElements2).css("background", "linear-gradient(rgba(82, 25, 25, 0.45),"+ hex +",rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)");` – layonez Aug 17 '17 at 13:53
  • Huu i dont understand here is it working 0.o?? `$(customElements).css("background-color", "#" + hex); `but not in the `$(customElements2).css("background", + "linear-gradient(rgba(82, 25, 25, 0.45),"+ hex +",rgb(43, 25, 25)), url(../../../images/netpen/logo-bg.png)"); ` – Tom Lammers Aug 17 '17 at 14:22
  • You forget `+ #` – layonez Aug 17 '17 at 14:25
  • No where? i dont understand – Tom Lammers Aug 17 '17 at 14:28
  • Do you have skype – Tom Lammers Aug 17 '17 at 14:28
  • Sorry i'm busy right now, try that one `$(customElements2).css("background-image", "url(../../../images/netpen/logo-bg.png) linear-gradient(rgba(82, 25, 25, 0.45), "+ "#" + hex + " ,rgb(43, 25, 25)) ");` – layonez Aug 17 '17 at 15:29