CSS code customization - css

Question

I am an iPhone App Developer and have very very little knowledge about css.I have a code to create a no of cells.here this is:
<style type="text/css" media="screen">
body {
margin: 0;
width: 320px;
height: 200px;
}
.ad-carousel-view .cells > li {
width: 200px;
height: 70px;
padding-top: 16px;
padding-left: 20px;
color: white;
font-size: 20px;
font-family: "Helvetica Neue", Helvetica;
-webkit-border-radius: 10px;
-webkit-box-sizing: border-box;
background-image:url('13.jpg');
}
.ad-carousel-view .cells > li:nth-child(odd) {
background-color: rgb(255,59,59);
}
.ad-carousel-view .cells > li:nth-child(even) {
background-color: rgb(80,80,80);
background-image:url('13.jpg');
}
.ad-carousel-view .cells > li.active {
background-color: red;
background-image:url('23.jpg');
}
</style>
<style type="text/css">
.wrap{
border:solid 1px #000000;
width:320px;
height:150px;
position:relative;
top:0px;
left:0px;
}
</style>
in the above code the following section is used to set cell's BG color and image
//odd cell
.ad-carousel-view .cells > li:nth-child(odd) {
background-color: rgb(255,59,59);
}
//even cell
.ad-carousel-view .cells > li:nth-child(even) {
background-color: rgb(80,80,80);
background-image:url('13.jpg');
}
//highlighted cell
.ad-carousel-view .cells > li.active {
background-color: red;
background-image:url('23.jpg');
}
now what i need is to change BG image dynamically...i mean instead of using
background-image:url('23.jpg');
i want use variable something like
background-image:url(var);
is it possible in CSS??....if no then can anyone have any idea to dynamically set image name??

Answer 1

It's not possible in pure CSS. You could use Javascript to set the background-image property on load:
jQuery example:
$(document).ready(function(){
$('.ad-carousel-view .cells > li.active').each(function(){
var img = getYourImagePath();
$(this).css({backgroundImage: img});
});
});

Answer 2

You can do this in your HTML if you're using a server-side technology by using an inline style, so on your element you'd have something like:
<li class="active" style="background-image:url(###);"></li>
where you would replace ### with whatever output method you're using to dynamically set the image.
You can also set it with javascript if you don't have any server-side technology to work with:
var obj= document.getElementById('aUniqueId');
obj.style.backgroundImage = yourImage;
jQuery is similar but a little nicer because it can pick up the class instead of just the ID - which would be better if you want to apply more than one active class on the page:
$(".active").css("backgroundImage",yourImage);

Answer 3

Yes this should be fine. Have you tested it? I'm sure it works OK.

Answer 4

The LESS allows you to use variables in the CSS :)
Example:
#brand_color: #4D926F;
#header {
color: #brand_color;
}
h2 {
color: #brand_color;
}