View Full Version : does display: none; stop backgrounds from loading

02-24-2005, 05:34 AM
Hey all - it's been awhile,

I've been working on a new project, and I have stumbled across something that stumps me a little. I'm using css pop-ups via :hover and these pop-ups are given a background-image. Example:
div.play-item:hover p {
display: block;
width: 193px;
background: url(../inc/pop-bottom2.png) no-repeat left bottom;
}Obviously, if a user were on a slow enough connection they might not see the background image until it finished loading. I don't have a slow enough connection to test on, but I was wondering if assigning the background-image to the p element at the same time I give it the display: none; property will "preload" the image?
div.play-item p {
display: none;
background: url(../inc/pop-bottom2.png) no-repeat left bottom;
}My first thought was that this would definetly solve the problem, but considering that elements with display: none; "create no box at all" (w3.org) I started to doubt. Anone have any idea if the background image will indeed preload?

02-24-2005, 05:46 AM
No, it won't.
Sorry :)

If you used visibility:hidden it MAY work, but I still have my doubts.

One way you could achieve this would be to use background-position:; to push the image out of the boundaries of the <p>... except it won't work in IE. :mad:

02-24-2005, 05:56 AM
what about "height: 0"?

02-24-2005, 10:25 AM
How 'bout positioning the entire p off the screen with a large negative value?

02-24-2005, 10:28 AM
Have we had this conversation before, only in reverse?



02-24-2005, 11:11 AM

Somehow I managed to completely miss your post in that one. I even ended up trying my own suggestion out for myself, actually using p's instead of images. Worked a charm, by the way.

02-24-2005, 06:12 PM
How 'bout positioning the entire p off the screen with a large negative value?
Wonderful! Also, thanks for the example rmedek-I didn't think the idea would work until I witnessed it live. I would have thought positioning the element like that wouldn't have hidden it and that you would have been able to scroll up and see it. I was quite wrong. Great method I didn't even think about-thanks all!

02-24-2005, 09:04 PM
Well, I thought all was good, but the pop-ups fail in Opera 7.54 (the only version I have) now. Everything is fine until the first pop-up, which while it appears perfectly normal on mouseover, does not disappear on mouseout. I'll look into this a little more, but perhaps in the end I will just forego the pre-loading... hopefully the images won't take too long to load (combined 2.5kb).