Is that possible to do this using external CSS?

Question

HTML:

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

I can't see any images in your example. I'm interested to know what the hover state looks like. — Syntax Error, May 01 '11 at 05:13

score 3 · Accepted Answer · answered May 01 '11 at 05:05

3

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.

answered May 01 '11 at 05:05

dnch

9,565
2
38
41

1

I'm fairly certain this is what you need to do. Inline styles weren't put there for the sole sake of allowing people to be lazy. They are sometimes the right way to do it. – Syntax Error May 01 '11 at 05:15
That's what I thought to do actually. But, surprisingly, it doesn't work: http://stackoverflow.com/questions/5846637/why-an-inline-background-image-style-doesnt-work-in-chrome-10-and-internet-exp – Misha Moroshko May 01 '11 at 05:21

score 0 · Answer 2 · answered May 01 '11 at 04:37

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

I thought to use `img`, but I can't figure out how to make it work. Your example doesn't do the same as mine :( — Misha Moroshko, May 01 '11 at 04:43

bloodcell · Answer 3 · 2011-05-01T04:56:20.177

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/

score 0 · Answer 4 · answered May 01 '11 at 04:39

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.

answered May 01 '11 at 04:39

robx

3,093
2
26
29

It's not a problem to get the link to the photo. The main problem I guess: is that possible to create a sprite using `img` ? – Misha Moroshko May 01 '11 at 04:44
I thought sprite was on large image just manipulated in position? But you have different images loading in the css. – robx May 01 '11 at 04:51
maybe try smartsprites. I have not used it myself, but looks pretty well documented for sprites ;) http://csssprites.org/ – robx May 01 '11 at 04:57

Is that possible to do this using external CSS?

4 Answers4