How to put the background effect fixed and on the whole screen?

Asked

Viewed 1,119 times

2

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

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=

I’ve done some research to know how to implement, the problem is that I don’t know what is the name that is given to this type of effect 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 small;

<?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>

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;
  }
jquery html css
  • 2

    I just don’t understand what jQuery has to do with the background. Just putting in CSS isn’t simpler? background: url(images/bg.jpg) no-repeat center center fixed; &#xA; -webkit-background-size: cover;&#xA; -moz-background-size: cover;&#xA; -o-background-size: cover;&#xA; background-size: cover;

  • so this effect that exists on this page is only done with CSS?

  • I wouldn’t even call a still image an effect. I updated the comment above with CSS, I’ll put it in response form, it becomes more legible.

  • Thanks, I’ll take a test.

  • 1

    Yeah, the background is pretty different than what I posted, right? Check out my first comment of all: background: url(images/bg.jpg) no-repeat center center fixed; Change that background-image for what I posted, just adjust what’s inside the URL for your case.

2 answers

9


With jQuery I don’t see much sense, but with CSS it would be enough:

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 the important points:

  • in the background notice that the property has been used Fixed;
    Remember that the order of the parameters is important for it to work properly.

  • in the background-size we use the property cover, which is what magnifies the image to cover the entire page.

  • this implementation didn’t work, I could put my application on github for you to take a look at or would like you to put the HTML and CSS code here?

  • Work it works, even has a demo. Need to see what you did differently in yours. I will edit the answer to you see the important points.

  • If you want, put a skeleton in the codepen itself, or in the jsfiddle, because you can already test "live". In fact my answer has 100% of what you need, just put the rest of the layout on top of it, instead of complicating for nothing. That Wix that you put only has more transparent Divs (and for some reason the Wix scroll looks horrible). Just don’t want to put your whole project there, put the relevant part only.

  • I just updated my post,

  • @wladyband then. Look at the background of mine and yours. It has neither center nor Fixed in yours. Take the background-image and put it in place: background: url( ... ) no-repeat center center fixed;

  • when you commented I swore that was my mistake, but after I made the modification the background image does not appear, I believe that as I am using a Java project using JSF the way to implement would be different, there is still how to help me?

  • 1

    @wladyband I’m sure it’s some silly syntax. background: url("#{resource['images/sampa.jpg']}") no-repeat center center fixed; doesn’t work?

  • now picked up, I want to thank you for your patience.

  • @wladyband the important thing is to work. But when something is not as you expect in some answer, comment, because people can not guess if it worked, and it is easier to help you.

Show 4 more comments

1

Has a perfect plugin called Vagasjs. It’s great for this, because it gives you many options including slideshow as fixed background.

I prefer a solution like the one marked as a response, which only uses CSS, but if you want more dynamics use Vegasjs.

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.