Simple question

Content
1

if i do it like this

<html>
link to css
<body
<div id=“picture”
</div>
<div id=“picture”
</div>
<div id=“picture”
</div>
<div id=“picture”
</div>
<div id=“picture”
</div>
<div id=“picture”
</div>

</body>

</html>

css

#picture{
background: url(picture.png);
width:200px;
height:200px;
}

if my picture is 100kb does the browser load the picture once from my website or every time i do a <div id=“picture”></div>

I am going to have 1 picture display on 50 different places on my webpage.
What is the best way to do this so the loading time on the page is as fast as posible.

//thaman941

Grammar fault and spelling faults are on me!!

2

50 different places… I hope that’s a bit of an exaggeration. =p

Regardless though, any time you load ANY file, it will only load once (in all but a few special cases which you’d have to purposely trigger) when your page loads.

So, whether you use an image on a page once or 50 times, it’ll still only download once.

3

also… for this you should use class and not an ID

4