Set a web page background color before the background image loads
I have a web application, and the background image is a dark color. It's also over 100KB in size. (I don't really appreciate the background image being that big, but that's not anything I can do anything about, or the subject of this question.. In addition it's a JPEG! .. The web design has come from the customer and I have to leave it as it is, despite my protests!)
As the background image is mainly comprised of dark colors (nearly black), the text is white.
The trouble is, the first time the user goes to the web page, the background is white (default browser background) and the text is also white, so you can't read any of the text. Only after the background image has loaded, can you read the text. (The page loads a CSS file, this loads another CSS file, and in this is specified the background image. So on a high-latency connection such as UMTS mobile internet connection, this can take a few seconds.)
Is there any way to say "the background of this page should have a particular background image (as now) but in addition should have the color black, i.e. black will be displayed until the background image has loaded, or if it doesn't load"? In that way, the user would be able to read the text immediately. I'm sure I've seen this done (or was that table cell backgrounds?) but alas can't remember how and Googling also hasn't helped.
The current CSS is:
bod开发者_StackOverflow中文版y {
background: transparent url(bg.jpg) top left no-repeat;
}
I have added "black" to the "background" property but this didn't help.
Actually it's pretty easy, just change the code you already have:
body {
background: #000 url(bg.jpg) top left no-repeat;
}
The transparent there is the background color of the body element, now set to black.
As you say it's loaded slowly (through two CSS files), it might flash white. This can be averted by using a <style> tag in the <head> section of your document:
<style type="text/css">
body {
background: #000 url(bg.jpg) top left no-repeat;
}
</style>
This should make the background black straight away :)
This should do it
body {
background: url(bg.jpg) top left no-repeat #000;
}
This will apply the color black to your body.
The previous answers should work, but incase they don't here is another trick. You can use javascript to preload the image and then update the style of the body so as to use the image you loaded as background.
You can see an example using jquery here http://jqueryfordesigners.com/image-loading/. Actually, I think that's what you need.
加载中,请稍侯......
精彩评论