Cómo agregar una dimensión personalizada a su patrón de fondo con Div

Los nuevos modelos de fondo de la división agregan muchas opciones de diseño visual a cualquier división. Estos modelos de fondo repetidos se ven geniales, pero se pueden usar para más que un modelo de repetición. También podemos usarlos como un solo fondo gráfico para llamar la atención sobre áreas específicas de la pantalla o para romper los elementos visuales. La configuración del modelo de fondo de Div, en este caso, la dimensión personalizada, nos ofrece muchas opciones de diseño. En esta publicación, analizaremos tres ejemplos y veremos cómo agregar una dimensión personalizada a su modelo de fondo con DIV, para ayudarlo a obtener ideas para su propio sitio de división.
Vista previa primero, veamos qué haremos. Aquí hay un vistazo a cada modelo de fondo en las dimensiones de la pantalla de escritorio, tableta y teléfono. Los primeros resultados del modelo de fondo personalizado de escritorio

Tableta

Teléfono

Resultados Segundo modelo de movimiento con tamaño de escritorio personalizado

Tableta

Teléfono

Resultados Tercer modelo de fondo con tamaño personalizado de escritorio

Tableta

Teléfono

Modelo de papel tapiz con tamaño personalizado Para nuestros ejemplos, utilizo la primera sección de la página de destino libre de Acai Bowl disponible en el Div. Agregaremos tres modelos de fondo diferentes y los personalizaremos para cada una de las opciones de dispositivo. La sección de mis ejemplos utiliza el color de fondo #F9F3FD. Mantendremos este color de fondo y agregaremos los patrones de fondo.

El primer ejemplo de un modelo de fondo personalizado de nuestro primer ejemplo agregará rayas diagonales que aparecen solo en la parte inferior de la sección. Necesitaremos diferentes configuraciones para dispositivos de escritorio, tableta y teléfono. Primero, abra la configuración de la sección haciendo clic en el icono de la rueda. Luego, desplácese hacia abajo hacia el fondo. Haremos ajustes a las tres dimensiones de la pantalla, así que comencemos seleccionando el icono de la tableta que aparece cuando pasamos el mouse sobre las opciones de fondo. Elija el patrón de fondo

Luego, asegúrese de que el escritorio esté seleccionado, elija el modelo de fondo y haga clic en Agregar el modelo de fondo.

Seleccione el cuadro de caída debajo del modelo de fondo.

Elija el modelo de fondo con rayas diagonales de la lista. Podemos cambiar este modelo, por lo que no es solo una pantalla rayada. Entonces usaremos esto para crear nuestro fondo único.

Patrón de fondo: rayas diagonales
Configuración Modelo de fondo Cambiar el color del modelo en RGBA (68.40,84,0.13). Este color combina bien con nuestro color de fondo.

Color del modelo: RGBA (68,40,84,0.13)
Luego abra el cuadro de caída del tamaño del modelo y seleccione el tamaño personalizado. Establezca la altura del modelo en 41VH, el origen de la repetición del modelo en el centro inferior y la repetición del modelo en la repetición x (horizontal). Esto nos da control sobre el tamaño y el posicionamiento del modelo de fondo en la pantalla.

Tamaño del modelo: tamaño personalizado
Altura: 41vh
Repita el origen: abajo en el centro
Repita: repetición x (horizontal)
Configuración de fondo de tabletas Entonces, necesitamos que el fondo funcione bien con diferentes tamaños de pantalla. Tendremos que ajustar la altura del modelo de acuerdo con el tamaño de la pantalla. Desplácese de regreso a la configuración de fondo y seleccione el icono de la tableta. Cambie la altura del modelo a 30 VH.

Altura del modelo: 30 VH

Configuración de fondo del teléfono Eventualmente, regrese a la configuración de fondo y seleccione el icono del teléfono.
Cambiar la altura del modelo a 25VH. Cierre la configuración del módulo y guarde la página.

Altura del modelo: 25VH

El segundo ejemplo de un modelo de fondo personalizado con el segundo ejemplo de un modelo de fondo personalizado agregará un círculo al centro de la pantalla. Para nuestro diseño, aparecerá detrás del Acai Bowl en nuestra imagen presentada. Elija el modelo de fondo en la sección Configuración, desplácese hacia abajo hasta el fondo y seleccione el icono de la tableta para abrir la configuración del tamaño del dispositivo. Elija la pestaña Desktop, seleccione el modelo de fondo y haga clic en Agregar fondo.
Queremos balas para este ejemplo. Esta es la opción predeterminada, por lo que no tendrá que abrir el cuadro desplegable para ella. Te muestro las opciones si te mueves de un modelo de fondo diferente. Las balas aparecen automáticamente al hacer clic en Agregar el modelo de fondo. Haga doble clic en el modelo o use el cuadro desplegable para cambiarlo.

Patrón de fondo: Bulines

Cambia el color a blanco. Esto nos permite agregar un círculo blanco al fondo.

Color: #ffffff

Próximo. Establezca el tamaño del modelo para personalizar, la altura a 400 VH y repita el origen en el centro. Estas configuraciones controlan el tamaño y la posición de los puntos. En este caso, creamos un solo punto para aparecer en segundo plano. Dimensión del modelo: dimensión personalizada
Altura del modelo: 400VH

Repita el origen: Centro
Configuración de fondo de tabletas Continúe asegurándose de que funcione bien en todos los tamaños de pantalla. Elija la pestaña de la tableta.
Luego cambie la altura del modelo a 300 VH.
Altura del modelo: 300 VH

Configuración de fondo del teléfono Eventualmente, regrese a la configuración de fondo y seleccione la pestaña del teléfono para abrir la configuración del tamaño de la pantalla del teléfono.

Cambiar la altura del modelo a 200VH. Cierre la configuración del módulo y guarde la página.
Altura del modelo: 200vh

El tercer ejemplo de un modelo de fondo personalizado Este ejemplo muestra una sola línea en zigzag a través del medio de la sección. Para esto, no necesitaremos ajustar el teléfono por separado. Les permitiremos seguir la configuración de la tableta.

Elija el modelo de fondo para el tercer ejemplo de un modelo de fondo personalizado, abra la configuración de la sección y desplácese hacia abajo hasta el fondo. Pase el cursor sobre la configuración de fondo y haga clic en el icono de la tableta para abrir la configuración de su dispositivo. Elija la pestaña Desktop y seleccione la pestaña Modelo de fondo. Haga clic en Agregar modelo de fondo.
Abra la caja del sótano desplegable y elija Zig Zag 2. Este modelo llena la pantalla con líneas en zigzag, pero la ajustaremos para que solo muestre una línea.

Modelo de fondo: Zig Zag 2
Cambie el color del modelo de fondo a RGBA (68,40,84,0.09). Este color no tiene un alto contraste con nuestro color de fondo, por lo que no entretendrá la atención. Modelo de fondo: RGBA (68.40,84,0.09)

Establezca el tamaño del modelo en el tamaño personalizado, la altura del modelo a 20 VH, el origen del modelo en el centro y la repetición del modelo a la repetición x (horizontal). Al igual que los otros ejemplos, controla el tamaño y la posición del modelo.
Tamaño del modelo: tamaño personalizado

Altura del modelo: 20 VH
Repita el origen: Centro

Modelo de repetición: repetición x (horizontal)
Configuración de fondo de la tableta Eventualmente, desplácese de regreso al comienzo de la configuración de fondo y haga clic en el icono de la tableta. La configuración del teléfono usará automáticamente esta configuración, por lo que no necesitará hacer ajustes en la pestaña del teléfono.
Desplácese hacia abajo hasta la altura del patrón y cámbielo a 10 VH. Cierre la configuración del módulo y guarde la página.
Altura del modelo: 10 VH
Los resultados aquí hay un vistazo a cada modelo de fondo en las dimensiones de la pantalla de escritorio, tableta y teléfono. Los primeros resultados del modelo de fondo personalizado de escritorio

Tableta

Teléfono
Resultados Segundo modelo de movimiento con tamaño de escritorio personalizado

Tableta

Teléfono

Resultados Tercer modelo de fondo con tamaño personalizado de escritorio

Tableta

Teléfono