Is that possible to do this using external CSS?

Consider the following example:

HTML:

<div开发者_StackOverflow社区 id="julia" class="photo"></div>
<div id="rachel" class="photo"></div>
<div id="martin" class="photo"></div>

CSS:

.photo {
    width: 60px;
    height: 60px;
    display: inline-block;
}
.photo:hover {
    background-position: -60px 0;
}
#julia {
    background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');
}
#rachel {
    background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');
}
#martin {
    background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');
}

This example demonstrates what I want to achieve.

The HTML is generated by Rails 3 application. It should display all the users in a specific group (this info is stored in the database). In other words, the list of users to display may vary.

The problem is that I don't want to have this code:

#username {
    background-image: url('/path/to/username/sprite');
}

for each existing username. Moreover, if a new user is added, I don't want to change the CSS.

The question is: Is that possible to achieve the same effect using external CSS ?

---

Just in-line the background-image style attribute in each div:

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');" id="julia" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');" id="rachel" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');" id="martin" class="photo"></div>

There's no need to make it complicated.

---

You can move the image into your HTML then have your css apply a hover tag to the image much like you have it set up.

Hard to test becuase the image host doesn't like hotlinking. Take a look here fiddled

HTML

    <div id="julia" class="photo"><img src="http://www.mypicx.com/uploadimg/1312875436_05012011_2.png"/></div>
<div id="rachel" class="photo"><img src="http://www.mypicx.com/uploadimg/1932001963_05012011_1.png"/></div>
<div id="martin" class="photo"><img src="http://www.mypicx.com/uploadimg/2082029375_05012011_3.png"/></div>

CSS

.photo img {
     width: 60px;
    height: 60px;
    display: inline-block;
}
.photo img:hover {
     background-position: -60px 0;
}

---

What do you mean by external? Separate file or css file coming completely from a different machine?

To the best of my knowledge, the only way for those images to change is if you set it to change (dynamic) for each user. Assuming path to their photo's are stored in a database, you can use php or other dynamic language to embed an img element with the src being dynamic in the html template.

Example:

<?php
function getUserImage(){
 //code to get img path from database
 return result;
}
?>
<img src="<?php print getUserImage(); ?>" alt="" />

Depending on who logged in, the image will change depending userID from the database.

---

If your external css file is static then it is logically impossible, I think, since the url information is dynamic.

EDIT: If I understand correctly, your problem is not to make the hover trick work (because it works...), but how to set the background-image attribute for each and every div (different values every time - dynamic information).

So, like others here said can use dynamic rendering of pages like php, jsp, whatever.

That said, maybe you can use a dynamic css file that you write to on the server side. (but that's weird)

http://css-tricks.com/can-we-prevent-css-caching/