Background-img css

Guys, I am using bootstrap 2.3.2 css and want to use a bootstrap carousel to show some of the premium products on the front page of my website., well I want to have have a link on the top of the background image (like a button or something which will go to advanced search page.)

Anyways, for showing the background image i am using div class and in the css as you can see below, the background image is shown

<div class="header-shadow">Hello</div>

<style type="text/css">


    background-image: url('./images/image1.jpg');



i am trying to figure out how to dynamically change the url value of the background-image. above… if that is possible i can then use the code snippet below

<div class="item" style="background-image: url('./images/image1.jpg) no-repeat left center; background-size: cover;">

  <div class="container">

    <div class="carousel-caption">

      <h1>Another example headline.</h1>

      <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>

      <a class="btn btn-large btn-primary" href="#">Learn more</a>




doesanyone has a simple example please? i am trying hard to also understand this…

Use a foreach and loop through the images and add them as images for the slider.