CSS code customization

Question

Hi, 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

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

Answer 2

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 3

The LESS allows you to use variables in the CSS :)

Example:

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Answer 4

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);