1

I use root css to set my background image. It is supported by all other browser but in IE 9+ I am not able to apply background image to css. May be browser is supported for root css. I am setting root css variable using javascript. I use LESS and Sass css also but did'nt get any way to set css global variable via javascript or JQuery. This is my css code:-

:root{
--mainbgimage: url("image.jpg");
}
body{
background-image: var(--mainbgimage);
}

Is there any way to make this code supported for IE browser Javascript code

var image = // image fetched from database;
document.documentElement.style.setProperty("--mainbgimage", image);
Balu Khengat
  • 91
  • 1
  • 7

1 Answers1

1

CSS Variables are not supported up to IE 11. See http://caniuse.com/#feat=css-variables

You need to reference the url to the image directly in the body class, e.g. 

body{
background-image: url("image.jpg");
}

If you set the image url in javascript, then you need to access the body element directly in javascript and change the image url.

chaenu
  • 1,915
  • 16
  • 32
  • any other way to set css data dynamically. I want set that value in multiple class in css – Balu Khengat Aug 01 '17 at 07:24
  • If you know before, which elements will get this background-image, then just add an additional class to them, e.g. '.dynamic-background-image'. Then in javascript, create the class and add the background-image url to it (see. e.g. https://stackoverflow.com/questions/7125453/modifying-css-class-property-values-on-the-fly-with-javascript-jquery) – chaenu Aug 01 '17 at 07:37