2

Sou novo como programador Frond-End e meu chefe quer que eu coloque um efeito de plano de fundo fixo como é mostrado no modelo abaixo;

http://pt.wix.com/website-template/view/html/1595?originUrl=http%3A%2F%2Fpt.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fbusiness%2F4&bookName=create-master-new&galleryDocIndex=3&category=business&metaSiteId=

Já fiz algumas pesquisas para saber como implementar, o problema é que eu não sei qual é o nome que se dá á esse tipo de efeito com Jquery.

Somente preciso do nome desse efeito de Jquery para começar a pesquisar e saber como implementar.

XHTML, eu estou usando JSF, mas a diferença é pouca;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="sistema.css" />

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
</h:head>


<h:body>

    <div id="part1">
        <div class="row">
            <div class="col-md-8"></div>
            <div class="col-md-4">
                <div id="fone">Telefone</div>
            </div>
        </div>


        <div class="container-fluid">
            <div id="conteudo">
                <div id="apresentacao">
                    <div id="frase">
                        <span>Bem vindo ao Agendador de salas</span>
                    </div>
                </div>
                <div id="apresentacao2">Fique atento as regras para agenda as
                    salas para reunião.</div>
            </div>
        </div>

    </div>
    <div class="faxa_preta">
        <div id="titulo_regras">Regras para agendamento das Salas</div>
    </div>
    <div id="part2">
        <div class="regrasDesc">
            <h2>Regras nº 1</h2>
            <p></p>
            <p></p>
            <p>Ao agendar uma das salas, a chave deverá ser retirada na
                recepção. Em seguida, ao término da reunião, a chave deverá ser
                entregue no mesmo local, confirmando a conclusão do agendamento.
                Caso a chave seja entregue fora do horário previsto pelo
                agendamento, será cobrada uma multa.</p>


        </div>
        <div class="regrasDesc">
            <h2>Regras nº 2</h2>
            <p></p>
            <p></p>
            <p>O cancelamento do horário agendado poderá ser efetuado
                mediante aviso prévio de duas horas, caso contrário, será cobrada
                uma multa equivalente ao valor de 1 hora,e cancelamento é realizado
                através do site.</p>

        </div>
        <div class="regrasDesc2">
            <h2>Regras nº 3</h2>
            <p></p>
            <p></p>
            <p>O cancelamento do horário agendado poderá ser efetuado
                mediante aviso prévio de duas horas, caso contrário, será cobrada
                uma multa equivalente ao valor de 1 hora,e cancelamento é realizado
                através do site.</p>

        </div>

    </div>
    <div id="part3">
        <div id="rodape"></div>

        <div class="faxa_preta">
            <div id="titulo_regras">
                <span>© 2023 por Wladimir Alves Bandeira | Desenvolvedor de
                    Software</span>
            </div>
        </div>

    </div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>
</html>

O CSS;

@CHARSET "UTF-8";

body {
    margin: 0;
    padding: 0;
    background-image: url("#{resource['images/sampa.jpg']}");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#part1 {
    width: 1300px;
    height: 80%;
    margin: 0 auto;
}

#part3 {
    width: 1300px;
    height: 80%;
    margin: 0 auto;
}
#conteudo {
    position: relative;
    top: 30px;
    width: 80%;
    height: 300px;
    margin: 0 auto;
    color: #fff;
    background: rgba(0, 0, 0, 0.40);
}

#apresentacao {
    position: relative;
    top: 20px;
    background: rgba(0, 0, 0, 0.90);
    padding: 10px;
    margin: 10px 10px 10px 10px;
    position: relative;
    width: 50%;
    font-size: 30px;

}

#apresentacao .frases {
    position: relative;
    left: 0px;
    color: #FFF;
    background: #000;
    padding: 5px;
    border: 1px solid #FFF;
    background: #000;
}

#apresentacao2 {
    background: rgba(0, 0, 0, 0.90);
    position: relative;
    top: 20px;
    padding: 10px 10px 10px 10px;
    width: 50%;
    margin: 20px 10px 10px 10px;
    height: 100px;
    font-size: 30px;

}

.faxa_preta {
    position: relative;
    top: 40px;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    background-color: #000000;
}

.faxa_preta span{
    position:relative;
    top:23px;
    font-size: 15px;
}
#titulo_regras {
    position: relative;
    top: 2px;
    text-align: center;
    font-size: 30px;
    width: 50%;
    height: 20px;
    margin: 0 auto;
    color: #fff;
}

#part2{

    margin: 0 auto;
    width: 1000px;
    height: 1000px;
    background: rgba(0, 0, 0, 0.30);
}

.regrasDesc{
    background: rgba(0, 0, 0, 0.40);
    position: relative;
    top:40px;
    float:left;
    width: 430px;
    text-align:center;
    color:#fff;
    height: 430px;
    margin-left:30px;

}

.regrasDesc p{
    position:relative;
    top:0px;
    font-family:sans-serif;
    font-size: 20px;
    text-align:left;
    margin-left: 5px;
    letter-spacing: 5px;
    word-spacing: 10px;
    line-height: 30px;
}

.regrasDesc2{
    background: rgba(0, 0, 0, 0.40);
    position: relative;
    top:70px;
    float:left;
    width: 430px;
    text-align:center;
    color:#fff;
    height: 430px;
    margin-left:30px;

}

.regrasDesc2 p{
    position:relative;
    top:0px;
    font-family:sans-serif;
    font-size: 20px;
    text-align:left;
    margin-left: 5px;
    letter-spacing: 5px;
    word-spacing: 10px;
    line-height: 30px;
}
p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

  #rodape{
    position:relative;
    top:50px;
    border: 2px solid #fff;
    width:1000px;
    height:50px;
    margin: 0 auto;
  }
5
  • 2
    Só não entendi o que é que o jQuery tem a ver com o plano de fundo. Só colocar no CSS não é mais simples? 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;
    – Largato
    27/11/2015 às 12:19
  • então esse efeito que existe nessa pagina é somente feito com CSS?
    – user10264
    27/11/2015 às 12:21
  • Eu nem chamaria uma imagem parada de efeito. Atualizei o comment acima com o CSS, vou por em forma de resposta, fica mais legivel.
    – Largato
    27/11/2015 às 12:21
  • valeu, vou fazer um teste.
    – user10264
    27/11/2015 às 12:23
  • 1
    Pois é, o background está bem diferente do que eu postei, não? Veja o meu primeiro comment de todos: background: url(images/bg.jpg) no-repeat center center fixed; Troque aquele background-image por isso que eu postei, só ajuste o que está dentro do URL pro seu caso.
    – Largato
    1/12/2015 às 20:23

2 Respostas 2

8

Com jQuery eu não vejo muito sentido, mas com CSS bastaria isso:

body, html {
  margin:0;
  padding:0;
  border: none;
}

body {
  background: url(https://i.stack.imgur.com/o7AFv.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* DAQUI PARA BAIXO É SÓ DEMONSTRAÇÃO */

body {
  position:relative;
  color:#fff;
  font-size: 150%;
  text-shadow: 2px 2px 2px #000;
}

div {
  width:60%;
  margin:0 auto;
}
<div>
  Role a p&aacute;gina, teste em página cheia e com a janela em várias medidas.<br>
  <br>
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
  <br>  
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
  <br>  
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
  <br>  
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
  <br>  
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
  <br>  
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
  <br>  
  Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>Texto<br>
</div>

Aqui os pontos importantes:

  • no background perceba que foi usada a propriedade fixed;
    Lembre-se que a ordem dos parâmetros é importante para que funcione corretamente.

  • no background-size usamos a propriedade cover, que é o que amplia a imagem de forma a cobrir a página toda.

9
  • essa implementação não funcionou, eu poderia colocar minha aplicação no github para você dá uma olhada ou gostaria que colocasse o código do HTML e CSS aqui?
    – user10264
    1/12/2015 às 20:04
  • Funcionar ela funciona, tem até um demo. Precisa ver o que você fez de diferente na sua. Vou editar a resposta para você ver os pontos importantes.
    – Largato
    1/12/2015 às 20:07
  • Se quiser, ponha um esqueleto no codepen mesmo, ou no jsfiddle, pois já dá pra testar "ao vivo". ´Na verdade na minha resposta tem 100% do que você precisa, bastaria colocar o resto do layout em cima disso, em vez de complicar à toa. Aquele wix que vc pos só tem umas divs transparentes à mais (e por algum motivo o scroll do wix fica horrível). Só não vá querer por o seu projeto todo lá, ponha a parte relevante apenas.
    – Largato
    1/12/2015 às 20:12
  • acabei de atualizar a minha postagem,
    – user10264
    1/12/2015 às 20:17
  • 1
    @wladyband tenho certeza que é alguma bobeirinha de sintaxe. background: url("#{resource['images/sampa.jpg']}") no-repeat center center fixed; não funciona?
    – Largato
    1/12/2015 às 20:35
1

Tem um plugin perfeito chamado VagasJS. É muito bom pra isso, porque te dá muitas opções inclusive de slideshow como background fixo.

Eu prefiro uma solução como a marcada como reposta, que só usa o CSS, mas se quiser mais dinâmica use o VegasJS.