Home/ Questions/Q 4016366
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T09:43:52+00:00

I have a web application, and the background image is a dark color. It’s

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 🙂

    • 0