0

Al cargar mi pagina en el navegador de google chrome no se ve pero en los demás navegadores si y al quitarle el estilo de background-attachment:fixed; si se ve pero no hace el efecto que quiero de pasar por atrás de un rgb y que la imagen se vea en el fondo, la imagen se queda estatica. Repito esto solo me pasa en google chrome. La imagen va en el footer de fondo el rgb va en la section la cual esta encima del footer.

La imagen si se ve en ese ejemplo porque estoy viendo la pagina en internet explore pero en google chrome no se ve la imagen.

<div class="contact col-xs-12 col-sm-12 col-md-12 col-lg-12">

  <footer class="" style="width:100%; background-image:url(img/fg.jpg); background-repeat:no-repeat; margin-top:50px; background-size:cover; background-attachment:fixed;">

    <section id="vacio" style=" height:600px;  background-color: rgba(0,0,0,0.5); width:100%;">

      <!--map-->
      <div class=" col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-top:13%;">

        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3598.4883955475957!2d-103.7" width="100%" height="290px" frameborder="0" style="border:0" allowfullscreen></iframe>

      </div>
      <!--map-->

    </section>

  </footer>

</div>

Asi se ve en chrome

introducir la descripción de la imagen aquí

10
  • 1
    esa imagen de fondo a la que te refieres es del footer, por lo que muestras ahí o estas hablando del fondo del sitio en total?, creo que deberías aclarar esas cosas y mostrar alguna imagen que respalde eso, ya que con el código que muestras solo estas haciendo un cambio en el pie de la página.Saludos. el 24 jul. 2018 a las 20:04
  • background-image:url(/img/fg.jpg); el 24 jul. 2018 a las 20:05
  • o esta mala la ruta de la imagen o el contenido del footer cubre todo el espacio del mismo por lo que no se ve la imagen
    – LPZadkiel
    el 24 jul. 2018 a las 20:14
  • puedes subir tu ejemplo a codepen.io ? o alguno parecido para ayudar el 24 jul. 2018 a las 20:19
  • listo ahi esta la imagen esa esta cargada con IE11 por lo que la ruta no esta mal
    – ivanrangel
    el 24 jul. 2018 a las 21:14

2 respuestas 2

0

Fijate si en tu chrome se ve este snippet.

  • Bootstrap 4.1
  • Bootstrap 3.3.7
  • imagen de fondo cargada desde web

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />


<body style="padding:20px 0; background:#e43;margin:0">
  <div class="contact col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <footer class="" style="width:100%; background-image:url(https://picsum.photos/1680/945/?random); background-repeat:no-repeat; margin-top:50px; background-size:cover; background-attachment:fixed;">

      <section id="vacio" style=" height:600px;  background-color: rgba(0,0,0,0.5); width:100%;">
        <!--map-->
        <div class=" col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-top:13%;">
          <iframe src="https://www.google.com/maps/embed?pb=!1m13!1m8!1m3!1d748.4268550806544!2d2.1770822!3d41.380441!3m2!1i1024!2i768!4f13.1!3m2!1m1!2sPla%C3%A7a+de+George+Orwell!5e0!3m2!1sen!2sar!4v1532468854303" 
            width="100%" height="290px" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
        <!--map-->
      </section>
    </footer>
  </div>
</body>

7
  • 1
    si, si se ve yo estoy usando bootstrap 3.3.7 y no no se ve y si trato de cambiarme a 4.1 me cambia toda la estructura.
    – ivanrangel
    el 24 jul. 2018 a las 22:10
  • ok me fijo de usar la 3.3.7 y probamos de nuevo, sino puede ser que el archivo de imagen esté medio roto o tenga un formato que explorer deja pasar y chrome no lo carga el 24 jul. 2018 a las 22:12
  • actualizado el bootstrap el 24 jul. 2018 a las 22:17
  • Sigue sin funcionar ya agregue tus enlaces quite los míos hasta la url de la imagen y ni asi y ya lo probe en varias computadoras.
    – ivanrangel
    el 24 jul. 2018 a las 22:25
  • si cambias img/fg.jpg por https://picsum.photos/1680/945/?random sigue sin verse? el 24 jul. 2018 a las 22:27
0

Corri tu ejemplo con una imagen local.

En tal caso lo que faltaba es la altura del footer. lo dejo en 600px pero fíjate tu cual te conviene.

<footer class="" style="width:100%;height:600px; background-image:url(img/fg.jpg); background-repeat:no-repeat; margin-top:50px; background-size:cover; background-attachment:fixed;">
2
  • si ves la imagen que anexe te darás cuenta que no hay problema con eso puesto que lo cargo en IE11 y se ve bien pero en chrome no se ve nada.
    – ivanrangel
    el 24 jul. 2018 a las 21:16
  • Si lo se no carga fue cortado a propósito.
    – ivanrangel
    el 24 jul. 2018 a las 21:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.