How can I get rainyday.js to use a CSS background image as it's background?

Question

So I have a basic website with a full sized, fixed background set with CSS. I want to implement rainyday.js over the top of everything in my whole site (including the text).

Currently, the best I can do is getting rainyday.js to overlay another background image over the top and rain in that small section. It is creating another 'background' and using that instead.

It seems it is possible here , however I don't understand how you are supposed to do it.

This is the rainy day code.

Thanks!

HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">

    <title>Safe House</title>

    <link href="index.css" rel="stylesheet">

</head>



<body>


    <div id="yes">
        <div id="maindiv">
            Safe House
        </div>

        <div id="secondarydiv">
            <p>noun</p>

            <p>1.</p>

            <p>a dwelling or building whose conventional appearance makes it a
            safe or</p>

            <p>inconspicuous place for hiding, taking refuge, or carrying on
            clandestine activities.</p>
        </div>
    </div>
</body>
</html>

CSS:

@import url(http://fonts.googleapis.com/css?family=Coming+Soon);


#maindiv {
      text-align: center;
      font-family: 'Coming Soon', sans-serif;
      font-style: italic;
      color: white;
      text-transform: uppercase;
      font-size: 10em;
      font-weight: 700;
      text-transform: uppercase;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

#secondarydiv{

    font-family: 'Coming Soon', sans-serif;
      font-style: italic;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      font-size: 1.5em; /*font size of main headings*/
      font-weight: 700;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      margin-left: 300px;
}

#yes {
    margin-top: 150px;
}


body { 
  background: url("images/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

p {
    margin: 0;


}

Answer 1

作者仍在努力之中，请参阅https://github.com/maroslaw/rainyday.js/issues/95 ，您可以在该问题单中与其他人讨论，甚至可以加入进度以添加此功能！

How can I get rainyday.js to use a CSS background image as it's background?

Question

1 answers

solution1
0 2014-11-05 13:13:52

How can I get rainyday.js to use a CSS background image as it's background?

Question

1 answers

solution1 0 2014-11-05 13:13:52

solution1
0 2014-11-05 13:13:52