Fondos repetidos. Generadores de fondo sin fisuras. Trabajo preliminar sobre nuestros antecedentes.

propiedad CSS repetición de fondo le permite especificar si se repetirá la imagen de fondo de un conjunto de elementos que utiliza la propiedad. Es posible configurar el modo para repetir la imagen horizontal, vertical o en ambas direcciones al mismo tiempo. En la especificación, CSS3 le permite especificar múltiples valores, separados por comas, para cada una de las imágenes de fondo. De forma predeterminada, la imagen de fondo se repite vertical y horizontalmente.

La propiedad de repetición de fondo es compatible con todos los navegadores modernos.
En la especificación CSS3, la propiedad background-repeat admite fondos de múltiples capas y le permite especificar si la imagen de fondo se repetirá para cada uno de ellos. En este caso, los valores se listan separados por comas.

Sintaxis

repetición de fondo: estilo de repetición[, estilo de repetición]*

Dónde estilo de repetición— uno de los valores admitidos.

Valores

La propiedad de repetición de fondo puede tener uno o dos valores. Si se especifican dos valores, el primer valor especifica el modo de repetición horizontal, el segundo, el modo de repetición vertical.
La propiedad de repetición de fondo puede tomar los siguientes valores:

Sin repetición La imagen de fondo especificada por la propiedad background-image no se repite. Equivalente a no repetir, no repetir, repetir La imagen de fondo se repite vertical y horizontalmente. Equivalente a repetir repetir repetir-x La imagen de fondo se repite horizontalmente. Equivalente a repetir sin repetición repetir-y La imagen de fondo se repite verticalmente. Equivalente a heredar repetición sin repetición El valor se hereda elemento padre espacio La imagen de fondo se repite suficientes veces para llenar todo el espacio sin recortar la imagen. Si es necesario, se agrega relleno entre imágenes. Equivalente a space space round La imagen de fondo se repite suficientes veces para llenar todo el espacio sin recortar la imagen. Si es necesario, las imágenes se escalan. Equivalente a redondo redondo

Hola, queridos lectores del blog. Hoy veremos cinco reglas CSS que le permiten establecer un fondo para cualquier elemento en HTML: posición de fondo (imagen, repetición, color, archivo adjunto). Bueno, tampoco olvidemos mencionar la regla compuesta de fondo.

No hay nada complicado en esto, pero sí ciertas sutilezas y matices que necesitas saber y ya plantilla preparada(recuerde lo que ayudará a revelar todos los entresijos de cualquier diseño).

Permítanme recordarles una vez más que este artículo es parte de una serie y sería mejor comenzar a estudiar el marcado de estilo desde el principio, es decir, con un artículo sobre qué es CSS y para qué se usa, y luego seguir en el orden indicado. en el libro de referencia. Aunque, en cualquier caso, depende de usted, pero ahora hablemos de configurar el fondo.

Color, color de fondo e imagen de fondo

Veamos primero cómo se establece el color. elementos HTML usando reglas de color css. De hecho, aquí todo es sencillo. La sintaxis es completamente normal y puedes configurar el color de acuerdo con cómo se hizo en el idioma. marcado de hipertexto. Como recordarás, colocado después del signo de almohadilla (hash - “#fe35a3”), o usando tres dígitos, si el primero coincide con el valor del segundo, el tercero con el cuarto y el quinto, respectivamente, con el sexto ( El código de color “#aa33ff” se puede escribir brevemente como "a3f").

También colores en HTML y codigo css se puede representar como palabras (por ejemplo, "rojo"), pero la mayoría de las veces se utiliza el código hexadecimal:

Color:#303

Como ejemplo, he coloreado este pequeño párrafo del mismo color que el anterior (#303). Ahora es ligeramente diferente del color de todos los demás párrafos (más oscuro), que está establecido en #555 en archivo css usado por mi temas de WordPress. Pero configurar el color usando color es bastante sencillo, pero con el fondo será un poco más complicado.

Entonces, para el fondo en css Hay cinco reglas que se pueden combinar en una sola si se desea. Para verlos, puede ir a la página de especificaciones actual del W3C y buscar cualquier cosa con la palabra Fondo:

1. color de fondo: con esta regla, establece el color de fondo para cualquier elemento HTML. Puede utilizar un código o el nombre de la sombra, es decir. Todo es exactamente igual que cuando se usaba color.

imagen de fondo: con ella puede usar una imagen como fondo (pero asegúrese de leer sobre esto, porque las imágenes pesadas ralentizarán la carga de las páginas), cuya ruta se indicará en la funcionalidad URL ().

Si miras las especificaciones verás que color de fondo predeterminado cualquier elemento será transparente (el valor predeterminado de la regla es “color de fondo: transparente”). Es cierto que en los elementos no será transparente de forma predeterminada, porque Este elementos del sistema y con ellos todo es diferente y diferente de las etiquetas ordinarias del lenguaje de marcado de hipertexto.

El color del color de fondo se establece como estándar (seis o tres dígitos código hexadecimal, o palabra):

Color de fondo:#FEFCDE

Por ejemplo, el fondo de este párrafo se especifica usando color de fondo con el código de color que figura justo arriba.

Las otras cuatro reglas CSS solo afectarán imagen de fondo, que se puede configurar para cualquier elemento HTML y, si se desea, posicionar con precisión. El archivo gráfico que se utilizará se puede especificar usando imagen de fondo.

Si observa la especificación del lenguaje de marcado, verá que la imagen de fondo tiene el valor predeterminado "ninguno" (es decir, no se utiliza ninguna imagen para el fondo). Bueno, si aún necesitas esto, entonces en la funcionalidad url() deberás indicar la ruta:

Imagen de fondo:url(https://site/image/comment_top_focus.gif);

Por ejemplo, para este párrafo utilicé un archivo gráfico con un fondo, cuya ruta se describe justo arriba. Verá que toda el área asignada para este párrafo está cubierta con una imagen repetida, que en el original se ve así:

Aquellos. cuando se utiliza solo una regla de imagen de fondo que especifica la ruta a archivo gráfico, esta misma imagen se multiplicará tanto vertical como horizontalmente hasta cubrir toda el área asignada en la página web para este elemento HTML específico (en nuestro ejemplo era un párrafo). ¿Por qué sucede esto?

Repetición de fondo: repite la imagen de fondo

Sí, porque no especificamos ningún valor para la regla CSS. repetición de fondo, lo que significa que se utilizará el valor predeterminado. Mirando la especificación, encontramos que este valor corresponde a "repetir" (repetir la imagen en todos los ejes). La respuesta fue natural.

Por lo tanto, con la repetición en segundo plano podemos gestionar las repeticiones de imágenes de fondo. Esta regla sólo puede tener cuatro significados:




Posición de fondo: posicionamiento de fondo

Ahora surge la pregunta, ¿es posible alejar la imagen de fondo de la izquierda? esquina superiorárea que limita el tamaño del elemento. Por supuesto que puedes, y existe una regla separada para este propósito. posición de fondo:



Al observar la especificación CSS, queda claro por qué la imagen de fondo de forma predeterminada se presiona exactamente en el borde superior izquierdo del área del elemento HTML. Porque "0% 0%" es el valor predeterminado para la regla de posición de fondo.

Bueno, ¿cuándo entra en vigor esta regla? explícitamente no se especifica para el elemento (como en nuestro caso), entonces el navegador selecciona su valor predeterminado, que se acepta en la especificación (tenga en cuenta que los ejes de coordenadas en CSS se informan exactamente desde el borde superior izquierdo del área del elemento).

También queda claro en la especificación que para posicionar la imagen de fondo usando la posición de fondo, puede usar valores tanto relativos (porcentajes) como absolutos (por ejemplo, ). Bueno, también puedes usar palabras que correspondan a ciertos valores digitales. Pero primero lo primero.

Al configurar la posición de la imagen de fondo usando unidades absolutas en posición de fondo se utiliza el siguiente principio para determinar su posición final:

Aquellos. el navegador calculará los desplazamientos especificados a lo largo de los ejes X e Y desde el origen del área en la que se coloca el objeto hasta el origen de esta imagen. Por ejemplo, en este párrafo coloqué la imagen de fondo mediante la posición de fondo usando las siguientes reglas CSS:

Imagen de fondo: URL (https://sitio/imagen/logo.png); repetición de fondo: sin repetición; posición de fondo: 400px 25px;

Tenga en cuenta que está en en este caso se alineará con el centro del área de visualización y no con el centro del área asignada para estos párrafos. Está claro que, en realidad, es poco probable que se utilice dicha colocación de una imagen de fondo.

Sin embargo, si establece una posición de fondo fija para elementos como Body o Html (es decir, en etiquetas que cubren toda la página web), entonces esta foto siempre estará visible en el área de visualización y así es exactamente como se usa propiedad CSS adjunto de fondo en diseño de bloque moderno.

hay mas regla prefabricada Fondo, que le permite combinar las cinco reglas descritas anteriormente en una sola botella. Además, los valores de los cinco en la versión combinada se pueden utilizar en cualquier orden y en cualquier cantidad (son únicos y el navegador no los confundirá entre sí). Todo lo que no especifique explícitamente será contado por el navegador. igual al valor por defecto.

Png) no repetición 50%;

El ejemplo de regla prefabricada se aplica a este párrafo para mayor claridad. No quedó bonito, pero eso no es lo principal. Para este párrafo se utiliza relleno de fondo extraño amarillo, y también utiliza una imagen del logotipo de Liveinternet, alineado en el centro del párrafo. Porque Si a la regla de conexión en segundo plano no se le asigna ningún valor, entonces se utiliza el valor de desplazamiento (el valor predeterminado).

Si para algún elemento desea establecer solo un relleno de color y no molestarse con una imagen de fondo, puede hacer esto en su lugar:

Color de fondo:#FEFCDE

escribir:

Antecedentes:#FEFCDE

Porque todo lo demás importa reglas prefabricadas se tomará de forma predeterminada, que es lo que necesitaba.

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

");">


Quizás te interese

Estilo de lista (tipo, imagen, posición): reglas CSS para personalización apariencia listas en código HTML Cómo configurar la rotación color de fondo filas de tablas, listas y otros elementos HTML en el sitio utilizando la pseudoclase nth-child
Posición (absoluta, relativa y fija) - métodos posicionamiento HTML elementos en CSS (reglas izquierda, derecha, arriba y abajo)
Flotar y borrar en CSS - herramientas diseño de bloque
Posicionamiento usando índice Z y regla CSS Cursor para cambiar el cursor del mouse.

Empecemos.

Trabajo preliminar sobre nuestros antecedentes.

Para empezar, sólo necesitamos dibujar algunos antecedentes.

1. nosotros creamos nuevo documento 600 por 600 píxeles

1. Elegí dos colores #F1F1F1 y #E4E4E4

1. Ahora aplicamos el filtro Nubes al documento creado. ( filtro -> Renderizar -> Nubes)
2. Después de eso, la diferencia se nubla varias veces. ( filtro -> Renderizar -> Nubes de diferencia) En general, debería obtener algo como esto:

si ahora este fondo intenta reproducirlo, obtendremos esta imagen no bonita:

Como puedes ver, los bordes de las imágenes que se unen son muy claramente visibles, ¡tenemos que deshacernos de ellos!

Cortar la imagen

1. Primero creemos una copia de nuestro fondo en una nueva capa y rellenemos el fondo con blanco.

1. Ahora creemos, en la esquina inferior izquierda, una selección de 450 por 450 píxeles.

1. Presione Shift + Ctrl + J, de esta manera recortaremos el área seleccionada de la capa de fondo

1. Ahora, de la capa en la que quedan los bordes superior y derecho, elimine la esquina superior derecha.

1. Ahora seleccione el borde derecho y presione Shift + Ctrl + J para que el borde superior y el derecho estén en capas separadas.

Ahora tenemos cuatro capas:

• fondo blanco
• Límite superior
• borde derecho
• Tamaño cuadrado 450 por 450 píxeles

Lo último que nos queda por hacer es en este punto Esto es para intercambiar capas. Es necesario que el área de 450 por 450 píxeles sea más baja que los bordes derecho y superior. Las capas deben estar en este orden:

Elimina los bordes del fondo. Crea un fondo repetido

¿Por qué tuvimos que cortar el fondo en tres partes? Si mueves el borde superior hacia abajo, y el borde derecho hacia la izquierda, y un poco con ellos ( con fronteras) para lanzar un hechizo, ¡¡obtendremos exactamente lo que creamos en esta lección!! =)

1. Movamos los límites y obtengamos el siguiente resultado:

1. Ahora necesitamos quitar una de las esquinas del borde derecho desplazado. Ver captura de pantalla a continuación

Es necesario retirarlo exactamente en este ángulo. Es muy importante para nosotros que no se toque el lado derecho del borde derecho desplazado.

1. Ahora conjuramos con un borrador para ajustar el dibujo ( al mismo tiempo lado derecho el borde derecho desplazado no se puede borrar)

1. Ahora necesitamos fusionar el borde derecho desplazado y el borde superior desplazado.

1. A continuación, debemos eliminar las esquinas superior y derecha de nuestros bordes ya fusionados. Atención a la pantalla

1. Ahora necesitamos ( de nuevo) ajusta el dibujo usando un borrador. Así es como se ve mi imagen:

Aquí hay una vista del borde terminado. Pensar este tipo Le resultará útil para comprender exactamente cómo limpiar con un borrador.

Tenga en cuenta que sólo puede sobrescribir el interior . ¡No puedes tocar el exterior!

1. Bueno, ya solo queda fusionar la imagen.

Conclusión

Ahora si hacemos mosaicos con datos imagen de fondo página del sitio, entonces no verá los bordes y será muy difícil entender exactamente dónde comienza y dónde termina la imagen =)

Esperanza esta lección Puede que le resulte útil =) Si tiene alguna pregunta, utilice el siguiente formulario =)

Si este blog Si te ha parecido interesante, suscríbete al feed RSS del blog a través de un lector o por correo.

¡Todo lo mejor para ti! ¡Eso es todo lo que tengo por hoy!

P.D.: Os he hablado más de una vez de un maravilloso RPG que cambió toda mi vida. Entonces salió a la luz en 2002. En el transcurso de ~9 años, Bethesda Softworks logró publicar dos partes más de los pergaminos antiguos. Última parte ( Skyrim) fue lanzado en noviembre de 2011. Si aún no lo has jugado y no sabes si vale la pena, te recomiendo que visites la sección Skyrim en el sitio web arbse.net. Lea lo que se indica en este recurso información, te ayudará a decidir =)

En este día me gustaría presentarles varios generadores gratis Fondos (patrones) transparentes para su sitio web. Más adelante en el artículo nos detendremos con más detalle en un generador; no me detendré en otros, porque, en principio, son similares.

Como ya habrás notado, en la mayoría de los sitios con , el fondo de la página tiene rayas y, francamente, se ve muy bien, especialmente si las rayas gris y pequeños.

Con la ayuda de estos generadores puedes hacer exactamente los mismos patrones, yo diría incluso mejores. Además, muchas configuraciones nos ayudarán con esto. Me gustaría recordarles que el generador que consideraremos ahora solo crea fondos rayados y sin costuras.

Entonces, comencemos.

Usaremos el sitio www.stripegenerator.com.

Después de ingresar al sitio, se le presentarán varias configuraciones. No hay muchos, pero esto es suficiente para hacer uno a rayas genial. fondo transparente para el sitio.

Así es como se ve el generador en sí:

Como ves, no hay nada complicado y todo está lógicamente claro. Pero todavía me gustaría dar conceptos a todas las secciones:

Funciones del generador

• tamaño de la raya— este es el ancho de la propia franja, que en este caso es roja;
• espaciado— distancia entre franjas rojas;
• color(es) de rayas- color de rayas. Como puede ver, el color predeterminado es el rojo, que se puede cambiar. Y también añade algunos colores más a tu gusto.
• estilo de fondo— estilo de fondo del patrón. Hay dos gradientes para elegir.
• sombra- una característica interesante que te permite ajustar la sombra de la tira. Este parámetro añade volumen al patrón.
• color(es) de fondo— Con esta función puedes personalizar el color de fondo. El valor predeterminado es el blanco.
• orientación de la raya- estilo e inclinación de la franja. La elección no es mucha, pero sí suficiente.

Para ver un ejemplo de tu arte, debes hacer clic en la imagen, que está a la derecha, y se actualizará. Para descargar un fondo transparente listo para usar, debe hacer clic en el botón DESCARGAR, que se encuentra debajo.

Un punto que me gustó mucho: debajo del propio generador hay patrones ya preparados por los usuarios que se pueden descargar fácilmente. Debes hacer clic en el fondo que te guste y guardarlo a través del navegador.

Eso es básicamente todo lo que quería decir sobre este generador. Todo es sencillo y de alta calidad.

Bueno, ahora os presento algunos más. generadores simples fondos sin costuras. Vamos.

Generadores de fondo sin costuras

www.tartanmaker.com

No es malo y es simple y crea fondos para celulares. También hay varias configuraciones que te ayudarán a crear un patrón.

www.bgpatterns.com

Un maravilloso generador de patrones. Hay muchas configuraciones y también hay varias imágenes que puedes usar. Para eliminar la imagen, la transparencia debe establecerse en 0.

www.stripemania.com

Otro gran generador fondos rayados

bgmaker.ventdaval.com

El fondo lo dibujas tú mismo y lo más interesante es que inmediatamente ves qué patrón dibujaste. Muy buena idea.

lab.rails2u.com

Generador de fondo rayado

Eso es todo queridos amigos. Espero que con la ayuda de estos sitios puedas crear el fondo para el sitio que necesitas. Nos vemos pronto.

En HTML, el fondo del sitio no se especifica; está escrito usando estilos CSS, pero esto es sólo una formalidad teórica. Ahora descubramos cómo determinar este fondo.

Fondo para un sitio web o un bloque separado

Como necesitamos un archivo css para lograr este objetivo, debemos crearlo y conectarlo a html. Esto está escrito en. Después de esto puedes empezar a trabajar. Primero, debe decidir en qué desea establecer el fondo. Si la página completa es completa, puedes hacerlo así:

Cuerpo (color de fondo: blanco;)

Es decir, recurrimos a etiqueta del cuerpo, que representa nuestra página completa. Para establecer el color de fondo, utilice la propiedad color de fondo. Pero, ¿qué sucede si necesita configurar el fondo con un patrón en lugar de un color sólido? Entonces deberías escribirlo así:

Cuerpo (imagen de fondo: URL (ruta a la imagen. extensión de la imagen))

Para mayor claridad, propongo considerar todo con más detalle usando un ejemplo. Para esto usaré esta imagen:

Por ejemplo, imagen de fondo: url(comp.png) . En este ejemplo, configuramos una imagen de fondo llamada comp (así es como la llamé yo) formato png, que está en la misma carpeta que el archivo css.
En html crearé un bloque personalizado con dimensiones específicas para demostrar el funcionamiento de las propiedades CSS.

Y aquí están los estilos para ello:

#ct(imagen de fondo: url(comp.png); ancho: 600px; alto: 400px; )

Esto es lo que tenemos:

¿Por qué es así? El caso es que por defecto el navegador repite la imagen tantas veces hasta llenar completamente el bloque. A veces esto es necesario, por ejemplo, cuando se utilizan patrones sin fisuras, pero en nuestro caso debería haber una imagen. Por suerte, esto se puede gestionar muy fácilmente.

Repetir fondo

Si tiene una imagen como fondo, de forma predeterminada se repetirá horizontal y verticalmente para llenar todo el espacio de la página. Para eliminar esto, use la propiedad de repetición de fondo y su valor de no repetición. También existen los siguientes valores:

• Repetir-x: repetir solo horizontalmente
• Repetir y – solo vertical

Agreguemos a las propiedades de nuestro fondo gráfico:

Repetición de fondo: no repetición;

Posición

La propiedad de posición de fondo determina la ubicación donde se colocará la imagen. Aquí se especifican dos valores: horizontal y vertical. Ejemplos: posición de fondo: parte inferior derecha: posición en la esquina inferior derecha, arriba a la izquierda: en la esquina superior inferior (y así de forma predeterminada), 250 px 500 px: desplazamiento desde la esquina superior izquierda hacia la derecha en 250 píxeles y hacia abajo en 500.

Echemos un mejor vistazo a los ejemplos:

Posición de fondo: arriba a la derecha;

La imagen se moverá al borde superior derecho. También le di al bloque un fondo amarillo para que se pudieran ver sus bordes.

posición de fondo: 50% 50%;

La imagen apareció exactamente centrada en su bloque. Sí, sí, esto también es posible gracias al registro porcentual del puesto.

posición de fondo: 70% 20%;

El fondo se desplaza un 70% horizontalmente y un 20% verticalmente.

También se permite especificar en píxeles valor negativo posiciones. Esto se puede hacer, por ejemplo, cuando estás usando una imagen de sprite grande y necesitas colocarla en un bloque. la parte correcta este duende.

Bloquear el fondo

También me gusta mucho una propiedad llamada background-attachment. Tiene sólo dos valores y el primero es el predeterminado (scroll). Esto significa que a medida que te desplazas por la página, el fondo también se desplazará y, si usas una imagen sin repetición, eventualmente se agotará y será solo de un color sólido.

Para evitar que esto suceda, se especifica background-attachment: fix y ahora nuestro fondo está fijo de forma segura en su lugar. Esto se puede comparar con cómo se puede definir un bloque. posicionamiento fijo y no desaparecerá de la página cuando la desplaces.

Una versión abreviada de toda esta bondad.

Hemos discutido muchas propiedades que te permiten crear un fondo, pero si las aplicas todas, terminarás con una grabación engorrosa. Hay una solución muy elegante. La propiedad de fondo te permite escribir un espacio separado ajustes necesarios en este orden:
Fondo: imagen en color repetir posición del pin;
Y ahora todo se puede escribir así:

Fondo: URL amarilla (comp.png) sin repetición 20% 100px;

Si no es necesario definir alguna propiedad, simplemente se omite (en nuestro caso, no escribimos adjunto de fondo).

muchos antecedentes

¿Qué pasa si necesitas varias imágenes de fondo? Sucede, ¿qué puedes hacer? Hoy CSS admite esta característica. Intentémoslo también. Tomemos este icono

Lo llamé computadora portátil.

Y aquí está el código para insertar el multiteléfono:

Antecedentes: url(comp.png) sin repetición 20% 100px, url(laptop.png) sin repetición 50% 50%; color de fondo: amarillo;

Como puedes ver, solo necesitas poner una coma después de la primera imagen e ingresar la configuración para la segunda. color sólido en este caso es mejor configurarlo por separado.

Del mismo modo, puedes grabar tantas imágenes como quieras, pero no te excedas: demasiados gráficos no son muy buenos.

Aquí es donde me gustaría terminar este artículo. Puedes hacer muchas otras cosas interesantes con el trasfondo, intentaré escribir sobre ellas en el futuro (y ya he escrito algo, por ejemplo).