URL de fondo CSS cómo ingresar la imagen completa. Antecedentes CSS. Guía completa. Cómo hacer que tu fondo sea más atractivo
Y aquí llegamos a lo principal, parafraseemos esto: “El sitio comienza con el fondo”. La mayoría de los blogueros hacen "blogs clásicos" con fondo blanco, pero nosotros tomaremos un camino diferente. Pase por una propiedad maravillosa. Imagen de fondo CSS, no podemos.
¿Qué hace? Esta propiedad Imagen de fondo CSS inserta una imagen como fondo en diferentes elementos HTML-páginas. No se limita solo a la etiqueta. cuerpo y se usa ampliamente en el diseño de sitios web, por ejemplo para: div, li, p, tabla, encabezado, pie de página.
Veamos un ejemplo:
El diseño de un sitio web comienza con el fondo.
Sería correcto especificar un color para el fondo – propiedad color de fondo, como red de seguridad si la imagen no se carga. Entre paréntesis URL() indique la ruta a la carpeta con imágenes.
De forma predeterminada, la imagen se repetirá como un "mosaico" hasta que ocupe toda la pantalla del navegador. A medida que avanzamos hacia abajo en la página, nuestro "mosaico" llenará tanto la segunda pantalla como la tercera, hasta que se acabe el contenido de la página; . Está claro que tal resultado no es el colmo del pensamiento de diseño, y no tendremos un "baño", sino simplemente un blog, donde la legibilidad es un punto muy importante.
Una opción sencilla para deshacerse del "mosaico" es utilizar una imagen grande, de al menos 1024 px de ancho, para que ocupe toda la pantalla. será también Buena decisión encuentre una textura perfecta; cuando la multiplique, el patrón se verá como un todo.
¿Cómo hacer que el fondo sea más atractivo?
Gracias a Dios tenemos ayudantes para esto:
- no repetir– desactivar la repetición
- repetir-x– repitiendo el patrón solo horizontalmente
- repetir-y– repitiendo el patrón solo verticalmente
Por ejemplo:
encabezado del blog
Esta es una textura de fondo que sólo se repite horizontalmente.
Siguiente ayudante: propiedad posición de fondo, le permite colocar la imagen de fondo en cualquier lugar de la pantalla. Esta técnica está muy extendida en el diseño web moderno. Tenemos una imagen, pero no forma parte del contenido, sino que sirve sólo como decoración del sitio.
Título
Un ejemplo de fondo no repetido con un posicionamiento determinado.
La imagen se muestra solo una vez y se encuentra a la derecha.
La sangría desde el borde derecho se establece en 200 px para evitar que el texto choque con el fondo.
Si queremos que la imagen esté siempre visible cuando la pantalla se desplaza hacia abajo, debemos agregar una propiedad al código anterior: adjunto de fondo: fijo;
Cuál es la diferencia entre imagen Y ¿imagen de fondo?
La diferencia es fundamental, etiqueta. imagen insertado directamente en el cuerpo HTML-página y es responsable del contenido (ilustraciones, fotografías, avatares), lleva una carga semántica. Es muy importante que la imagen esté indexada. los motores de búsqueda y me metí en Resultados de la búsqueda. Propiedades Imagen de fondo CSS– hacer que el sitio sea único y hermoso, es decir, este es un diseño que debe tenerse en cuenta archivo externo CSS estilos o uso dentro de un elemento estilo.
Por supuesto, esto no significa que imagen de fondo no funcionará si se coloca en el cuerpo HTML-páginas. Pero recomiendo encarecidamente que se tenga en cuenta todo lo relacionado con el diseño. CSS. Como resultado, obtendremos una limpieza HTML-código:
- esto tendrá un efecto positivo en la indexación del sitio; a los robots de búsqueda les encantará su sitio y lo visitarán con más frecuencia.
- sus visitantes también quedarán satisfechos, el sitio se cargará más rápido debido a su peso ligero.
- Es más fácil para usted, como webmaster, trabajar con código limpio.
Bueno, hemos considerado más o menos todas las opciones usando la propiedad. Imagen de fondo CSS. ¡Más práctica amigos! ¡Siéntete libre de copiar el código y crear tus propias variaciones!
Breve información
Versiones CSS
Valores
url El valor es la ruta al archivo gráfico, que se especifica dentro de la construcción url(). La ruta al archivo se puede escribir entre comillas (simples o dobles) o sin ellas. none Desactiva la imagen de fondo del elemento. heredar Hereda el valor del padre.HTML5 CSS2.1 IE Cr Op Sa Fx
modelo de objetos
document.getElementById("elementID ").estilo.fondoImagen
Navegadores
explorador de Internet hasta la versión 7.0 inclusive, aplica el fondo al borde interior de un elemento que tiene la propiedad hasLayout establecida. Si el elemento no tiene hasLayout , la propiedad background-image respetará los bordes del elemento, como se especifica en la especificación. La diferencia en la visualización se notará si los bordes son discontinuos o punteados en lugar de sólidos.
Si el elemento está configurado para desplazamiento o auto, Internet Explorer 8 tendrá un retraso vertical de un píxel cuando el fondo se desplace.
Las versiones de Internet Explorer hasta la 7.0 inclusive no admiten el valor heredado.
Si el fondo está configurado para una fila de la tabla (etiqueta
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Resultado este ejemplo V Navegador Chrome mostrado en la Fig. 1. Navegador de Internet Explorer, Opera y Firefox muestran correctamente el fondo de la línea (Fig. 2).
Arroz. 1. Repita el fondo para cada celda.
Arroz. 2. Fondo para toda la línea.
Breve información
Versiones CSS
Valores
url El valor es la ruta al archivo gráfico, que se especifica dentro de la construcción url(). La ruta al archivo se puede escribir entre comillas (simples o dobles) o sin ellas. none Desactiva la imagen de fondo del elemento. heredar Hereda el valor del padre.HTML5 CSS2.1 IE Cr Op Sa Fx
modelo de objetos
document.getElementById("elementID ").estilo.fondoImagen
Navegadores
Las versiones de Internet Explorer hasta la 7.0 inclusive aplican un fondo al borde interior de un elemento que tiene establecida la propiedad hasLayout. Si el elemento no tiene hasLayout , la propiedad background-image respetará los bordes del elemento, como se especifica en la especificación. La diferencia en la visualización se notará si los bordes son discontinuos o punteados en lugar de sólidos.
Si el elemento está configurado para desplazamiento o auto, Internet Explorer 8 tendrá un retraso vertical de un píxel cuando el fondo se desplace.
Las versiones de Internet Explorer hasta la 7.0 inclusive no admiten el valor heredado.
Si el fondo está configurado para una fila de la tabla (etiqueta
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
El resultado de este ejemplo en el navegador Chrome se muestra en la Fig. 1. Los navegadores Internet Explorer, Opera y Firefox muestran correctamente el fondo de la línea (Fig. 2).
Arroz. 1. Repita el fondo para cada celda.
Arroz. 2. Fondo para toda la línea.
Creo que no hay un solo sitio donde la propiedad no sea utilizada. fondo css. Parecería que ¿qué podría ser más sencillo que esta propiedad? Pero no, sus capacidades son mucho más amplias que la asignación habitual de una imagen o un color como fondo de página. Algunas cosas les resultarán familiares, mientras que otras probablemente serán nuevas para muchos. En cualquier caso, será útil conocer a fondo cómo funciona el fondo.
CSS3 trajo muchas cosas nuevas a la propiedad, como la transparencia y la asignación de varias imágenes como fondo, pero hablaremos de esto a continuación, pero primero veremos los conceptos básicos de la propiedad. fondo.
color de fondo
Estoy más que seguro que ya le has asignado el color de fondo más de una vez. Esto se puede hacer usando varios tipos de notación: notación regular (se usa el nombre del color), hexadecimal o RGB. Cada tipo es equivalente, usa el que más te guste. Intento utilizar la opción más corta y, para una percepción más sencilla, el archivo de estilo resultante es un poco más pequeño.
P (color de fondo: rojo;) p (color de fondo: #f00;) p (color de fondo: #ff0000;) p (color de fondo: rgb(255, 0, 0;))
CSS3 admite transparencia, por lo que podemos agregarla a nuestro color, por ejemplo así:
P (color de fondo: rgba(255, 0, 0, 0.5);)
La última cifra fijó la transparencia en 50%. Puede establecer el valor de transparencia desde 0 (completamente fondo transparente) a 1 (completamente opaco).
imagen de fondo
Esta propiedad también se usa con mucha frecuencia; le permite asignar una imagen al fondo. CSS3 ha agregado la capacidad de asignar múltiples imágenes al fondo, cada una creando su propia capa, por lo que cada una de las siguientes se superpone a la anterior. ¿Por qué podría ser útil esto? Todo es bastante simple: digamos que necesitas atornillar pequeños adornos en cada rincón del sitio. Dado un diseño más o menos gomoso, usar una imagen no es una opción. Por tanto, hacemos 4 “capas”, movemos cada imagen a su propia esquina y listo, el problema está solucionado.
Cuerpo (imagen de fondo: url("imagen1"), url("imagen2"), url("imagen3"))
Si necesita asignar una imagen al fondo, dejamos solo la primera en el código, creo que esto es comprensible.
Al utilizar imágenes como fondo, debes recordar dos reglas:
- establezca un color de fondo contrastante en caso de que el usuario no vea la imagen por algún motivo. Simplemente puede desactivar la visualización de imágenes, ahorrando tráfico.
- no utilice una imagen de fondo para transmitir cualquier información importante. Por los motivos expuestos anteriormente, es posible que el usuario no lo vea.
La compatibilidad con múltiples imágenes de fondo es bastante amplia. Todos los navegadores, incluso IE8, admiten esta propiedad.
imagen de fondo:
Descripción
propiedad de imagen de fondo(del inglés "imagen de fondo" - "imagen de fondo") establece la imagen de fondo del elemento.
Nota
Al configurar una imagen de fondo, también debe especificar un color de fondo que se utilizará si la imagen no está disponible. Si hay una imagen disponible, se muestra sobre el color de fondo. (De esta forma el color será visible en las partes transparentes de la imagen).
Condiciones de uso
Desde CSS3 (separados por comas) puedes especificar varias imágenes de fondo a la vez. Al mismo tiempo, cuanto más bajo imágenes de fondo será visible a través de las áreas transparentes de las imágenes de fondo superiores.
javascript
[objeto].style.backgroundImage="[valor]";
Soporte del navegador
Especificación
Valores
Todos los valores CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Ninguno Indica que no hay imagen de fondo. dirección URL (
imagen de fondo: url(miImagen.png);
URL("
imagen de fondo: url("miImagen.png ");
Heredar Especifica que el elemento debe heredar la configuración de su elemento principal.
Valor inicial: "ninguno".
Ejemplo de uso
Listado de códigos
Imagen de fondo
Un documento con múltiples imágenes de fondo.