Question

I try to create a plugin for personal use, that will place clouds in my web page randomly.

Lets see now what is my idea:

I have create an image with all my clouds.

In my CSS I have create a general class called .cloud that is applyed to all cloud elements and four classes .cloud_1 .cloud_2 .cloud_3 .cloud_4 for each cloud element I like to place in my document.

Here are the css classes I use:

.cloud
{
    display: block;
    position: absolute;
    background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}

.cloud_1
{
    width: 800px;
    height: 350px;
    background-position: 0px 0px;
    z-index: 1;
}

.cloud_2
{
    width: 800px;
    height: 469px;
    background-position: 0px -350px;
    z-index: 2;
}

.cloud_3
{
    width: 800px;
    height: 405px;
    background-position: 0px -819px;
    z-index: 3;
}

.cloud_4
{
    width: 630px;
    height: 314px;
    background-position: 0px -1225px;
    z-index: 4;
}

From the other hand I use jQuery to place generate and place my clouds randomly into my document with random top and left.

The problem I have is that, if I set the position to absolute for .cloud selector the clouds that go out of the document width they activating the horizontal scroll bar. If I set it to fixed, the clouds are attached to the same position while I scroll down and so on.

What is the best solution in order to place my clouds with no horizontal scroll bar and not stay fixed in the same position ?

---

Extra info

I forgot to tell you that the clouds will animated to the right !

---

Produced code example

<div class="cloud cloud_3"></div>

and jQuery will adding style attributes like that:

<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>

Also jQuery will change the left css position in order to animated

Answer 1

Place all the clouds in a <div> with overflow: hidden, and make it the full size of your document. Set that div to z-index: -1 so that it is behind the rest of your content.