0

Estoy maquetando una página web para un cliente (estoy utilizando bootstrap 5).

Cuando llego a la parte del footer, y coloco una background-image en el mismo, me aparece un recuadro transparente que bordea todos los elementos html del footer.

introducir la descripción de la imagen aquí

Por más que analice el código, no encuentro ninguna anomalía en el mismo, ni ninguna etiqueta que pueda ser la causante del problema.

Les dejo el código HTML para que me ayuden a desvelar este misterio jaja:

<!-- FOOTER -->

<div id="footer" class="p-5">
    <div class="container w-50 pt-4">
        <div class="row mb-4">
            <div class="col text-center">
                <a href="#">
                    <button class="btn btn-lg rounded-pill bg-primary w-10 p-3 shadow-sm fw-bold">Hazte suscriptor premium</button>
                </a>
            </div>
        </div>
        <div class="row py-4">
            <div class="col text-center fw-light">
                <p>Turismo Latino &copy 2022 Todos los derechos reservados</p>
            </div>
        </div>
        <div class="row text-center">
            <div class="col">
                <p class="fw-bold">Recuerda seguirme en mis redes sociales</p>
                <a href="#">
                    <button class="btn text-primary fw-bold">Facebook</button>
                </a>
                <a href="#">
                    <button class="btn text-info fw-bold">Twitter</button>
                </a>
                <a href="#">
                    <button class="btn text-danger fw-bold">Instagram</button>
                </a>
            </div>
        </div>
    </div>
</div>

y también mi código CSS:

#footer{
    background-image: url(/imagenes-background-footer/fondo\ de\ pierdas.jpg) ;
}
6
  • Hola. Si abres la consola del navegador e inspeccionas el footer, ¿qué sale? No es claro qué es lo que deberíamos mirar... Recuerda que puedes editar la pregunta y añadir toda la info que desees.
    – Alfabravo
    Commented el 21 feb. 2022 a las 22:56
  • Pues yo no veo nada raro, quizás es porque es transparente y no se ve. Yo no me preocuparia si es así.
    – masterguru
    Commented el 21 feb. 2022 a las 22:58
  • @masterguru si te fijas en la imagen vas a ver que hay una especie de "espejo" entre los elementos del footer y la imagen de fondo. Ese seria el problema jaja
    – Khuranes
    Commented el 21 feb. 2022 a las 23:06
  • Pues lo siento, no se apreciar eso que dices en la captura que has puesto... y eso que me he bajado la imagen, la he ampliado mucho y me he puesto las gafas de cerca :-) Quizás, y solo quizás, haya algun pixel rebelde, pero ni idea de lo percibes tu en esa captura y que te preocupa tanto. A menos que te refieras a que la imagen del fondo se repite, claro, pero será porque ya no da más de si en esa resolución y vuelve a empezar, y allí si se aprecia una rallita de ná
    – masterguru
    Commented el 21 feb. 2022 a las 23:12
  • 2
    Eso es la imagen que se repite, fíjate bien en las piedras, son las mismas que a la izquierda del todo, y claro, pierden la continuidad de colores, etc, y se aprecia la ralla de marras... Haz la ventana más pequeña y seguramente desaparecerá, o bien haz la imagen más larga y que ocupe todo el ancho sin tener que repetirse, o quizas es que la imagen ya es asi de saque.
    – masterguru
    Commented el 21 feb. 2022 a las 23:17

1 respuesta 1

2

Lo que logro apreciar es que tu imagen se está "repitiendo" porque las dimensiones de la misma no alcanzan a cubrir el tamaño del footer.

Para solucionarlo, basta con agregar las siguientes reglas CSS que están comentadas en el código:

#footer {
  /*Tomamos una imagen mas pequeña que el tamaño del footer*/
  background-image: url(https://picsum.photos/400/340);
  /*La alineamos al centro*/
  background-position: center;
  /*Establecemos que no se repita*/
  background-repeat: no-repeat;
  /*Y que cubra todo el espacio del div*/
  background-size: cover;
}
<div id="footer" class="p-5">
  <div class="container w-50 pt-4">
    <div class="row mb-4">
      <div class="col text-center">
        <a href="#">
          <button class="btn btn-lg rounded-pill bg-primary w-10 p-3 shadow-sm fw-bold">Hazte suscriptor premium</button>
        </a>
      </div>
    </div>
    <div class="row py-4">
      <div class="col text-center fw-light">
        <p>Turismo Latino &copy 2022 Todos los derechos reservados</p>
      </div>
    </div>
    <div class="row text-center">
      <div class="col">
        <p class="fw-bold">Recuerda seguirme en mis redes sociales</p>
        <a href="#">
          <button class="btn text-primary fw-bold">Facebook</button>
        </a>
        <a href="#">
          <button class="btn text-info fw-bold">Twitter</button>
        </a>
        <a href="#">
          <button class="btn text-danger fw-bold">Instagram</button>
        </a>
      </div>
    </div>
  </div>
</div>

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.