background permamente in html

Question

background permamente in html

Navigation

#1 by (3 votes)

0

Hello friends, I have this property css assigned from my driver for the vista home that will be displayed on the cell phone:

    body{
    'background-image':'url("../images/fondo_mix_cel.png")',
    'background-size': 'contain',
    'background-attachment':'fixed',
    'background-repeat':'no-repeat'
    }

And the problem is that I have 4 <section> in the view and this property is only loaded in the first <section> and the rest are blank! and I need it fixed by a visual theme.

How can I fix this?

html:

<div class="cuadroblanco t"></div>
<div class="cuadroblanco b"></div>
<div class="cuadroblanco l"></div>
<div class="cuadroblanco r"></div>

<div class="row elementos">
  <div class="hidden-xs col-md-6 ajus2">
    <div class="row ajus">
      <div class="col-xs-6 setelement">
        <div class="row setelement">
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i1.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i2.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i3.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i4.png" alt=""></div>
        </div>
      </div>
      <div class="col-xs-6 setelement">
        <div class="row setelement">
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i5.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i6.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i7.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i8.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden-xs col-md-6 ajus2">
    <div class="row ajus">
      <div class="col-xs-6 setelement">
        <div class="row setelement">
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i25.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i26.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i27.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i28.png" alt=""></div>
        </div>
      </div>
      <div class="col-xs-6 setelement">
        <div class="row setelement">
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i29.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i30.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i31.png" alt=""></div>
          <div class="col-xs-3 setelement"><img class="imalog center.block img-responsive" src="../images/i32.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section id="home" class="css_pron pag_home">
  <div class="texto_home j">
    <h3 class="animated bounceInDown bigl">Llegó el momento de definirse</h3>
    <img class="center-block img-responsive animated bounceInDown logocopec" src="../images/LOGOpronto.png" alt="">
    <h3 class="animated bounceInDown bigl">Presenta</h3>
    <img class="welcome center-block img-responsive animated bounceIn" src="../images/welcome.png" alt="">
    <img class="welcome_cel center-block img-responsive animated bounceIn " src="../images/welcome.png" alt="">
    <h3 class="animated bounceInDown textovota">Vota, inscríbete y participa por unas increíbles vacaciones<br>
      en San Pedro de Atacama o Torres del Paine</h3>
    <a href="" smooth-scroll-jquery target="eleccion" speed="1000" offset="-35"><img src="../images/votaaqui.png" alt="" class="boton center-block animated bounceIn"></a>
  </div>
  <img class="tulaenero cam_nor" when-visible="entradaenero" when-not-visible="salidaenero" class="hidden" src="../images/enerista_md.png">
  <img class="tulafebrero cam_nor" when-visible="entradafebrero" when-not-visible="salidafebrero" class="hidden" src="../images/febrerista_md.png">
</section>

<section id="eleccion" class="css_pron pag_home elec">

  <!-- CELULAR -->

  <div class="elec_cel center-block">
    <a href="" ng-click="GoToEnero()"><img class="center-block img-responsive mes_vs" when-visible="entradai" src="../images/enerista_md.png"></a>
    <img class="vac center-block img-responsive" src="../images/estas_vacaciones.png" alt="">
    <a href="" ng-click="GoToFebrero()"><img class="center-block img-responsive mes_vs" when-visible="entrada" src="../images/febrerista_md.png" alt=""></a>
  </div>

  <!-- PANTALLA WEB -->
  <div class="elec_nor center-block">
    <div class="row center-block img-responsive"><img class="vac center-block img-responsive" src="../images/estas_vacaciones.png" alt=""></div>
    <div class="row el">
      <div class="col-xs-6">
        <a href="" ng-click="GoToEnero()"><img class="center-block img-responsive vs_nor" when-visible="entradai" src="../images/enerista_md.png" alt=""></a>
      </div>
      <div class="col-xs-6">
        <a href="" ng-click="GoToFebrero()"><img class="center-block img-responsive vs_nor" when-visible="entrada" src="../images/febrerista_md.png" alt=""></a>

      </div>
    </div>
  </div>

</section>

<section id="feed" style="margin:0px 15px 0px 14px; padding:30px 10px 0px 10px;">
hagstags de redes sociales
</section>

<section id="footer" class="css_pron pag_home caminos animated fadeIn">
  <div class="row sep">
    <div class="col-md-3"></div>
    <div class="pilo col-xs-6 col-md-3 rsm">
      <a href="https://www.facebook.com/ProntoChile/">
        <img class="img-responsive irs" src="../images/facebook.png" alt="">
      </a>
      <a href="https://www.facebook.com/ProntoChile/">
        <span class="rst">prontochile</span>
      </a>
    </div>
    <div class="pilo col-xs-6 col-md-3 rsm">
      <a href="https://www.instagram.com/prontocopec_cl/">
        <img class="img-responsive irs" src="../images/insta.png" alt="">

        <a href="https://www.instagram.com/prontocopec_cl/">
          <span class="rst">prontocopec_cl</span>
        </a>

      </div>
    </div>
    <div class="row">
      <div class="col-xs-3"></div>
      <div class="col-xs-6 bases">
        <h7 class="h7">
          <a href="http://eneristaofebrerista.cl/bases_legales.pdf" target="_blank">BASES LEGALES</a>
        </h7>
      </div>
      <div class="col-xs-3"></div>

    </div>

    <img class="kafeed" src="../images/Kajak.png" alt="">
    <img class="estefeed" src="../images/Estrella.png" alt="">
    <img class="hawafeed" src="../images/Hawaianas02.png" alt="">
    <img class="quitafeed" src="../images/Quitasol.png" alt="">
    <img class="caballofeed" src="../images/Caballo.png" alt="">
    <img class="logopronto" src="../images/logo_pronto.png" alt="">
  </section>

  <img class="logopronto" src="../images/logo_pronto.png" alt="">

Greetings.

css angularjs

asked by Hernan Humaña 26.01.2017 в 16:43

source

1 answer

Jquery I have 2 document on click, and it only works if I remove 1 Appearance of footer when it is above the image (arrow)

score 3 · Answer 1

I would recommend you to start defining the css better, do not put the background directly to the body, I defined a class common to all sections, for example:

.bg{
'background-image':'url("../images/fondo_mix_cel.png")',
'background-size': 'contain',
'background-attachment':'fixed',
'background-repeat':'no-repeat'
}

and the html

<section class='bg'>

at the most if you are forcing the body another fund by css and you want to "step" you can add ! important after the css rule.