Question

i have div with this code

style

#input{background:url(../image/main.png)}
#input:hover {background:url(../image/hover.png)}

html

<div id="input">input div </div>
<div id="input">input div 2</div>
<div id="input">input div 3</div>
<div id="input">input div 4</div>

when page load main.png load and show but when mouse on div first div black and after 2 or 3 second hover.png show . my background pic size isnt big but maybe host is very weak anyway for load two pic first time and hover pic show fast?

Answer 1

You can use sprites for that and then set your background with background-position so this way everything will load at first time.

And the best thing about sprites that it actually makes your load time faster because each image requires separate request to the server but if you request just a single file for most of the website you can increase loading time dramatically.

This is a good example how it looks:

And the code wold be something like:

.mydiv:hover{
   background-position:-30px 0px;
}

Live example of how sprites works

For further reading on how background-positions actually works please take a look at this: http://www.w3schools.com/cssref/pr_background-position.asp