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;
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;
}