es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Flexbox, Grid o algo más para crear un fondo receptivo con elementos superpuestos?

14 Jul, 2023 Programación

Estoy tratando de crear un sitio web con el fondo adjunto. Sin embargo, estoy teniendo algunos problemas con los desgarros de papel. Originalmente, estaba creando un div de contenedor principal para cada sección. Sin embargo, no lograba que se viera bien.

Intenté hacer que el fondo fuera un jpg, pero eso no parecía funcionar muy bien. ¿Hay alguna forma inteligente de hacer que esto funcione? Estaba pensando que tal vez podría utilizar CSS grid con filas superpuestas para que sea responsive.

Con las partes del fondo que son cuadradas, puedo simplemente tener los dos divs tocándose y está bien. Solo no puedo resolver el problema del desgarro de papel…

No estoy seguro sinceramente. ¡Cualquier ayuda sería apreciada!

Imagen: La imagen de abajo muestra el diseño y las cajas rojas son donde irían mis divs de contenido.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para crear un fondo de sitio web con efecto de papel rasgado

    Puede resultar desafiante crear un fondo de sitio web con lágrimas de papel, especialmente cuando se intenta hacerlo responsivo. Aquí hay algunas soluciones que pueden ayudarte:

    1. Usar el diseño de cuadrícula de CSS

    Utilizar el diseño de cuadrícula de CSS puede ser una buena opción para crear un fondo responsivo con lágrimas de papel. Puedes crear filas o columnas superpuestas para lograr el efecto deseado. Puedes utilizar la propiedad grid-template-areas para crear diferentes áreas para el fondo, y luego utilizar background-image para aplicar el efecto de papel rasgado.

    .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "header header header"
    "content1 content2 content3"
    "content4 content5 content6"
    "footer footer footer";
}

.header {
  grid-area: header;
  background-image: url(header-bg.jpg);
  background-size: cover;
  height: 200px;
}

.content1 {
  grid-area: content1;
  background-image: url(content1-bg.jpg), url(paper-tear.png);
  background-position: center top, center 0;
  background-size: cover;
  height: 300px;
}

/* repetir para todos los bloques de contenido y el pie de página */
    1. Usar varias imágenes de fondo

    Otra opción es utilizar varias imágenes de fondo para lograr el efecto de papel rasgado. Puedes crear un div separado para la imagen de papel rasgado, y luego posicionarlo sobre el div del contenedor principal. Puedes utilizar la propiedad z-index para posicionar la imagen de papel rasgado en la parte superior del div del contenedor principal.

    .wrapper {
  background-image: url(main-bg.jpg);
  background-size: cover;
  height: 100vh;
  position: relative;
}

.paper-tear {
  background-image: url(paper-tear.png);
  background-size: contain;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

    En general, ambas opciones requieren experimentación y ajustes para lograr el efecto deseado. Pero con paciencia y creatividad, deberías poder crear un fondo de sitio web con lágrimas de papel que se vea genial en todos los dispositivos.

Comments are closed.