Menu
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:
body {
background: transparent url(bg.jpg) top left no-repeat;
}
I have added "black" to the "background" property but this didn't help.
838
Preloading images using HTML <link> Tag. These two value options of rel (relationship between the current document and the linked document) attribute are most relevant with the issue: prefetch : load the given resource while page rendering. preload : load the given resource before page rendering starts.
How to Add Background Color in HTML. To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
The background-color CSS property sets the background color of an element.
Add the style attribute to the <body> element You can set a background color for an HTML document by adding style="background-color:" to the <body> element.
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.
175
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 :)
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
