1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Html div no background

Criei uma div onde passam algumas nuvens na página, porém gostaria que essa div ficasse no fundo da pagina para que pudesse escrever algo na frente e não atrapalhasse a leitura do texto...

html

        <div class="clouds">
            <div id="clouds1">
                <div class="cloud1"></div>
                <div class="cloud2"></div>
                <div class="cloud3"></div>
            </div>
            <div id="clouds2">
                <div class="cloud1"></div>
                <div class="cloud2"></div>
                <div class="cloud3"></div>
            </div>
        </div>

CSS

.clouds {
    /*width: 900px;
    position: relative;
    height: 400px;
    overflow: hidden;*/
    margin: 0 auto;
    position: fixed !important;
}

/* Clouds */
#clouds1 {
    top: 100px;
    position: relative;
    -webkit-animation: move 100s infinite linear;  
    -moz-animation: move 100s infinite linear;  
    -ms-animation: move 100s infinite linear;
    z-index: 1;
}

#clouds2 {
    position: fixed;
    -webkit-animation: backup 80s infinite linear;
    -moz-animation: backup 80s infinite linear;
    -ms-animation: backup 80s infinite linear;
    z-index: 2;
    position: fixed !important;
}

.cloud1, .cloud2, .cloud3 { 
    opacity: 1;
}

.cloud1 {
    width: 200px;
    height: 60px;
    background: #00c9ee;
    top: 80px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

}

.cloud1:after {
    content: '';
    position: absolute;
    background: #00c9ee;
    width: 80px;
    height: 80px;
    top: -40px;
    left: 20px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

}

.cloud1:before {
    content: '';
    position: absolute;
    background: #00c9ee;
    width: 100px;
    height: 100px;
    top: -60px;
    right: 30px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.cloud2 {
    width: 100px;
    height: 30px;
    background: #00c9ee;
    position: absolute;
    top: 180px;
    left: 400px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.cloud2:after {
    content: '';
    position: absolute;
    background: #00c9ee;
    width: 40px;
    height: 40px;
    top: -20px;
    left: 10px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.cloud2:before {
    content: '';
    position: absolute;
    background: #00c9ee;
    width: 50px;
    height: 50px;
    top: -30px;
    right: 15px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.cloud3 {
    width: 200px;
    height: 60px;
    background: #00c9ee;
    position: absolute;
    top: 100px;
    left: 740px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.cloud3:after {
    content: '';
    position: absolute;
    background: #00c9ee;
    width: 80px;
    height: 80px;
    top: -40px;
    left: 20px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.cloud3:before {
    content: '';
    position: absolute;
    background: #00c9ee;
    width: 100px;
    height: 100px;
    top: -60px;
    right: 30px;

    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

@-webkit-keyframes move {
    0% {left: 0px;}
    49% {left: 940px; opacity: 1;}
    50% {left: 940px; opacity: 0;}
    51% {left: -940px; opacity: 0;} 
    52% {left: -940px; opacity: 1;} 
    100% {left: 0px;} 
}

@-webkit-keyframes backup {
    0% {left: -940px;}
    100% {left: 940px;}  
}  

@-moz-keyframes move {
    0% {left: 0px;}
    49% {left: 940px; opacity: 1;}
    50% {left: 940px; opacity: 0;}
    51% {left: -940px; opacity: 0;} 
    52% {left: -940px; opacity: 1;} 
    100% {left: 0px;} 
}

@-moz-keyframes backup {
    0% {left: -940px;}
    100% {left: 940px;}  
}  

@-ms-keyframes move {
    0% {left: 0px;}
    49% {left: 940px; opacity: 1;}
    50% {left: 940px; opacity: 0;}
    51% {left: -940px; opacity: 0;} 
    52% {left: -940px; opacity: 1;} 
    100% {left: 0px;} 
}

@-ms-keyframes backup {
    0% {left: -940px;}
    100% {left: 940px;}
}

#clouds .cloud1, #clouds .cloud2, #clouds .cloud2:after, #clouds .cloud2:before, #clouds .cloud3, #clouds .cloud1:after, #clouds .cloud1:before, #clouds .cloud3:before, #clouds .cloud3:after {
    background: #00f1ee;
    //box-shadow: 0px 0px 20px 5px #00f1ee;    
    -moz-box-shadow: 0px 0px 20px 5px #00f1ee;    
    -webkit-box-shadow: 0px 0px 20px 5px #00f1ee;
}

As nuvens aparecem sim, porém em cima do meu texto escrito na página.

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags html5 css properties ou faça a sua própria pergunta.