CSS background image does not display on first load?

问题

The background image in this html script: http://themes.googleusercontent.com/image?id=1nCEFJnjbEM1e6XClO-Dh7L-U6FJQuxivkV20FpXYmkNyRA0vQIZPfjuIp6hcROwwArvQ does not load. But if this image is first opened in the same browser, transferring it into the cache, then the background image is correctly displayed.

HTML follows:

<html>
      <head>
            <style type="text/css">
        body {
        font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
        color: #000000;
        background: #000002 url(http://themes.googleusercontent.com/image?id=1nCEFJnjbEM1e6XClO-Dh7L-U6FJQuxivkV20FpXYmkNyRA0vQIZPfjuIp6hcROwwArvQ) no-repeat fixed top center;
        }
        </style>


      </head>
      <body>
      </body>
    </html>

The problem may look trivial but it is replicated on at least 3 browsers: IE, Firefox, Chrome: no image pre-loaded, no background image displayed. If anyone has the solution to this outwardly quite simple problem, it will be most helpful.

Thanks.

回答1:

I think that problem is with body without content.

回答2:

Your image is 1800x1713 - depending on your network connection, it could take some time to download. You noticed that once it was in your browser's cache, it worked just fine, which makes sense if it is, in fact, the network.

Regarding the image itself, are you sure you have the rights to use it in the first place? The fact that you're pulling it out of the Google cache and that a reverse image search turns up quite a few results is not a good sign. Make sure you aren't violating the copyright of any images you do use on your site.

来源：https://stackoverflow.com/questions/10466680/css-background-image-does-not-display-on-first-load

标签

html

css

background-image