CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel.V
Daniel.V

Reputation: 2492

How to show the page when background image fully loaded?

I have a background image and I want to use $(documnet).load() to set an event that shows the page whenever the image is fully loaded. How can I do that?

My HTML code:

<html>
    <script src="../js/jquery-1.10.2.js"></script>
    </script>
        <style>
              body{
                background-image: url('../images/heart-beat.png');
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
        </style>
    <body>
    Hello World
    </body>
</html>

Upvotes: 2

Views: 2946

Answers (2)

mkafiyan
mkafiyan

Reputation: 954

please see this link .it's better to give background image to image tag in to ur body

<img src='yourimage' id='img'/>

Upvotes: 0

Hamilton Lucas
Hamilton Lucas

Reputation: 419

See this answer. Basically, you cannot detect the load event of a background image (it's supposed to happen in the background!) so you load the image using the image element, and then once it is loaded (and assumably cached in the browser) you set it to be the background image for the body.

Upvotes: 2

Related Questions