How to put the background effect fixed and the whole screen? [duplicate]

2

I'm new to the Frond-End programmer and my boss wants me to put a fixed background effect as shown in the template below;

link

I've done some research to know how to implement, the problem is that I do not know what the name of this type of effect is with Jquery.

I just need the name of this Jquery effect to start searching and know how to implement.

XHTML, I'm using JSF, but the difference is little;

<?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><!--LatestcompiledandminifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>
</html>

The 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;
  }
    
asked by anonymous 27.11.2015 / 13:17

2 answers

9

With jQuery I do not see much sense, but with CSS that would suffice:

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

body {
  background: url(http://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>

Here are the important points:

  • no background notice that the fixed property was used;
    Remember that the order of the parameters is important so that it works correctly.

  • In background-size we use the cover property, which widens the image to cover the entire page.

27.11.2015 / 13:22
1

You have a perfect plugin called VagasJS . It's great for this, because it gives you many options including slideshow as a background.

I prefer a solution like the one marked as an answer, which only uses CSS, but if you want more dynamic use VegasJS.

    
02.12.2015 / 08:22