CODEWITHSUNDEEP
css
Hugo Alves
Hugo Alves

Reputation: 79

CSS use title text to get background-image url

I currently have a little problem, but I think it is not possible to do it with only css3, I want to get a image name from the title attribute and use it on the background-image url, like this: 

#wizHeader li a[title^="step_"]{
    background-image: url("../images/" + attr(title) + ".png");
}

is this possible with only css3?

Upvotes: 0

Views: 100

Answers (2)

Ananth
Ananth

Reputation: 4397

If you use jQuery:

$(document).ready(function() {
    $('#wizHeader li a[title^="step_"]').each(function(k, v) {
        var title = $(v).attr('title');
        $(v).attr('style', 'background-image: url("../images/' + title + '.png")');
    });
});

Upvotes: 0

Mitya
Mitya

Reputation: 34566

Presently not possible. The attr function in CSS has great potential but, to my knowledge, at least cross-browser, it is presently usable only as part of the content property of pseudo elements, e.g.

.foo:after { content: attr(title); }

Further info at this question.

And here on CSS Tricks.

Upvotes: 2

Related Questions