I want the ID of the element as the background of the div

Question

I am trying to add a background image to each element on my page. The background images name is same as the id of the page (without the.png)

for example:

<div class="ClassOne" id='1'> /* i want this to have a bg of:  background-image:url('1.png')*/
</div>
<div class="ClassOne" id='2'> /* i want this to have a bg of:  background-image:url('2.png')*/
</div>
<div class="ClassOne" id='3'> /* i want this to have a bg of:  background-image:url('3.png')*/
</div>

Check this for ids with numbers http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number — web-tiki, May 30 '14 at 11:05

Samih · Answer 1 · 2014-05-30T11:24:43.850

1

Do you have a set number of possibilities? If you do you could use CSS:

#1 {
    background-image: url('1.png');
}

Now the element with an id of 1 will have that background image.

If you have multiple/more dynamic ids you might consider a javascript solution along the lines of: (edit: tailored to suit your comment)

function setBackgroundFromId(targetEl) {
    targetEl.style.backgroundImage('url(' + targetEl.id + '.png');
}
var imageDivs = document.querySelectorAll('ClassOne');
for (var i = 0; i < imageDivs.length; i++) {
    setBackgroundFromId(imageDivs[i]);
}

edited May 30 '14 at 11:24

answered May 30 '14 at 11:02

Samih

1,078
9
15

@KolosFeriFazekas Added a javascript solution which could be employed for this case. – Samih May 30 '14 at 11:08

score 1 · Accepted Answer · answered May 30 '14 at 11:08

1

Try this with jQuery.

Code Modified

var element = $(".ClassOne");
for(var i=0; i<element.length; i++)
{
 var id = element.eq(i).attr("id");
 element.eq(i).css({
  "background": "url("+ id +".png)"
 });
}

answered May 30 '14 at 11:08

Mayank Tripathi

1,346
7
21

element.eq(i).find(".statusbar").css({ "background": "url(/img/waveform/"+ id +".png)" }); howcome this doesnt work? :( – Kolos Feri Fazekas May 30 '14 at 11:42
http://beastdrops.com/test23.php and its Uncaught SyntaxError: Unexpected token : – Kolos Feri Fazekas May 30 '14 at 11:49
The waveform is appearing here. – Mayank Tripathi May 30 '14 at 11:51
look at the name of the waveform – Kolos Feri Fazekas May 30 '14 at 11:53
Ok. Got it. Your divs are added dynamically. So the function here is unable to find the element in the DOM during the execution. Call this snippet after the divs are added i.e. on the click of your link when the dive is added, place this snippet after that. – Mayank Tripathi May 30 '14 at 11:56
I guess it is unable to find the element so it must have been undefined so the unexpected token. – Mayank Tripathi May 30 '14 at 12:00

score 0 · Answer 3 · answered May 30 '14 at 11:04

0

Can't you just add the attribute:

style="background-image:url('x.png')"

To each element in the same way you generated the id attributes?

answered May 30 '14 at 11:04

Andres

13
4

if only i could... im using soundmanager2 and it adds divs later... :( – Kolos Feri Fazekas May 30 '14 at 11:10

I want the ID of the element as the background of the div

3 Answers3