Question

I try to change image backgrounds for every box inside a <td> tag but when I try to change one of these backgrounds, I obtain the same background of ALL boxes.
But it isn’t what I want.
This is the aspect of page:

The CSS that I’m using for box is this:

<style type='text/css'>
div.myautoscroll {
    height: 80ex;
    width: auto;
    background: white;
    background-image: url(cieloprato.jpg);
    overflow: hidden;
    border: 1px solid #444;
    margin: 1em;
}
div.myautoscroll:hover {
    overflow: auto;
}
div.myautoscroll p {
    padding-right: 16px;
}
div.myautoscroll:hover p {
    padding-right: 0px;
}
</style>

I tried add to each <div> element unique identifier or class, and get it by according selector in CSS but something is wrong.

I want change the 2nd background but if i try to change it, the css also changes my first background. You can see that background for both boxes is the same cieloprato.jpg. I want to insert another background for 2nd or 3rd box.
How can modify the CSS code?
This is my HTML page

Answer 1

yes, background image set for all div.myautoscroll ( and you see same image ). You can (for example) during generate table for every div.myautoscroll add ‘#myautoscroll_1’,’#myautoscroll_2’… ‘#myautoscroll_n’. And add css code:

#myautoscroll_1 {
   background-image: url(image_1.jpg);
}

#myautoscroll_2 {
   background-image: url(image_2.jpg);
}

#myautoscroll_n {
   background-image: url(image_n.jpg);
}