CSS code customization

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??

Pat · Accepted Answer · 2010-07-20 13:02:44Z

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

answered Jul 20, 2010 at 13:02

Pat

25.7k6 gold badges73 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rony Over a year ago

can u send me more details...i tried to use the code..on html body on load i call the function..setImage.like..but nothing happens.. function setImage() { alert("Hello.."); $('.ad-carousel-view .cells > li.active').each(function(){ alert("Hello.."); var img = getYourImagePath(); $(this).css({backgroundImage: img}); }); }

Pat Over a year ago

Do you have a function called getYourImagePath() defined? That's where you're going to need to put the logic that returns the background image path.

hollsk · Accepted Answer · 2010-07-20 13:05:21Z

1

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

answered Jul 20, 2010 at 13:05

hollsk

3,13725 silver badges34 bronze badges

3 Comments

Rony Over a year ago

how to add JQuery...??i want to set the image here .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(li); }

hollsk Over a year ago

If you've never used jQuery before then the best place to start is always with the documentation which is excellent: docs.jquery.com/Downloading_jQuery... and api.jquery.com/class-selector for what we're talking about here

Rony Over a year ago

$(" .ad-carousel-view .cells > li:nth-child(odd)").css("background-image","333_1.jpg"); i use something like this....but image does not load....can help??

Joel Kennedy · Accepted Answer · 2010-07-20 13:01:47Z

0

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

answered Jul 20, 2010 at 13:01

Joel Kennedy

1,6115 gold badges20 silver badges41 bronze badges

1 Comment

Rony Over a year ago

how to set the 'var'... suppose i know 'li' and i need li+".jpg"..then if the value of li=4 then 4.jpg image will load...then does background-image:url(li+".jpg"); is the way??

Sarfraz · Accepted Answer · 2010-07-20 13:05:15Z

0

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

Example:

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

answered Jul 20, 2010 at 13:05

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

1 Comment

Rony Over a year ago

how to dynamically assign value to this variable??

Collectives™ on Stack Overflow

CSS code customization

4 Answers 4

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related