Hogar › Ajustes › Cómo configurar el tamaño de la imagen de fondo en CSS. ¡Tamaño de fondo grande por favor! CSS. Escalar múltiples fondos

Cómo configurar el tamaño de la imagen de fondo en CSS. ¡Tamaño de fondo grande por favor! CSS. Escalar múltiples fondos

La resolución de los monitores crece constantemente y a la hora de diseñar páginas web debemos tener en cuenta los aspectos más importantes. amplia gama permisos. Esto es especialmente importante cuando se utiliza imagen de fondo, que se corta cuando la resolución del monitor es baja o, por el contrario, no se ajusta por completo cuando resolución alta. Una solución a esta situación es escalar el fondo. Por supuesto, esto promete algunos problemas, como la aparición de distorsiones y artefactos en las imágenes, pero también amplía el arsenal de herramientas de diseño.

El tamaño está controlado por la propiedad background-size; la palabra clave cover se puede especificar como un valor, entonces el tamaño de la imagen será tal que su ancho y alto encajen. área dada(por ejemplo, la ventana de una página web); La palabra clave contiene escala la imagen para que al menos un lado de la imagen encaje completamente en el área especificada. Además, es aceptable indicar dimensiones horizontales o verticales explícitas en porcentajes u otros unidades CSS. En la figura. 1 muestra el cambio en el tamaño de la imagen cuando diferentes significados tamaño de fondo. Gris Se selecciona un bloque de 280x200 píxeles, dentro del cual se establece el fondo.

Arroz. 1. Tipo de imágenes de fondo según el valor del tamaño del fondo.

Si se especifican dos valores de tamaño separados por un espacio, entonces el primer valor determina el ancho horizontal y el segundo determina el ancho vertical. En este caso, se ignoran las proporciones, lo que se ve claramente en la Fig. 1 año En lugar de uno de los tamaños, está permitido utilizar la palabra clave auto, luego el navegador la calcula automáticamente en función de las proporciones de la imagen.

El ejemplo 1 establece una foto de fondo que ocupa toda la ventana del navegador.

Ejemplo 1. Imagen de fondo

Escala de fondo

Resultado este ejemplo mostrado en la Fig. 2. A medida que cambia el tamaño de la ventana, la foto crecerá o se reducirá hasta ocupar toda la página web.

Las tecnologías web, al igual que diversas tendencias de diseño, no se detienen, por lo que cada vez aparecen algunas características y matices originales para los sitios web. Una de estas "direcciones" es el uso de un fondo (backgorund), que se extiende por toda la pantalla en ancho y alto. Algo así como hace un año o más, dije: la imagen se colocó en el encabezado del blog y se “transicionó” suavemente al encabezado principal. color de fondo páginas web. Si lo deseas, incluso puedes agregar.

Colocar una imagen grande escalable como fondo es algo nuevo y más complejo, cuya solución encontré en este artículo.

Objetivo esta lección coloque una imagen de fondo en el sitio que cubra constantemente todo el fondo de la ventana del navegador. Qué hay que hacer exactamente:

llenar toda la página con una imagen sin espacios;
cambiar el tamaño de la imagen si es necesario (reduciendo la ventana del navegador);
mantener las proporciones de la imagen;
posicionar la imagen en el centro de la página;
falta de barras de desplazamiento en la página;
solución para varios navegadores adecuada para diferentes navegadores;
implementación sin tecnologías de terceros como flash.

Entonces, hay varios soluciones adecuadas para el fondo del sitio en pantalla completa.

Una solución maravillosa, simple y progresiva usando CSS3

Para realizar esta tarea, podemos usar la propiedad tamaño de fondo en CSS3. Usaremos un elemento html que es mejor que el cuerpo. Configuremos el fondo para que sea fijo y centrado, y luego usemos el valor de cobertura en el tamaño del fondo.

html (fondo: url (images/bg.jpg) centro sin repetición fijo; -webkit-fondo-tamaño: portada; -moz-fondo-tamaño: portada; -o-fondo-tamaño: portada; tamaño de fondo: cubrir)

html (fondo: url(images/bg.jpg) centro sin repetición centro fijo; -webkit-fondo-tamaño: portada; -moz-fondo-tamaño: portada; -o-fondo-tamaño: portada; fondo-tamaño: cubrir)

La solución es compatible con casi todas las populares en Internet:

Firefox 3.6+ (Firefox 4 admite versiones con prefijo que no son del proveedor)
Opera 10+ (Opera 9.5 admite el tamaño de fondo pero sin el valor de portada)
Chrome lo que sea+
Es decir 9+
Safari 3+

Un tal Goltzman encontró una solución que permite que el hack funcione en IE

filtro: progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg", sizingMethod= "scale"); -filtro-ms:;

filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale"");

Pero atención!!! Esto puede causar algunos problemas con los enlaces de la página. Por cierto, un poco más tarde Matt Litherland agregó que el código, en principio, se puede usar, pero para esto no se pueden usar html o elementos del cuerpo y es necesario implementar todo a través de un div con 100% de alto y ancho.

CSS-truco número 1

Doug Neiner presenta una versión alternativa. En este caso se utiliza un elemento incrustado en la página. , cuyo tamaño se puede cambiar en cualquier navegador. Establecemos el valor de altura mínima, que llena la ventana del navegador verticalmente, y configuramos el ancho al 100%, que llena la página horizontalmente. También configuramos el ancho mínimo para que la imagen nunca sea más pequeña de lo que realmente es.

img.bg ( /* Establecer reglas para rellenar el fondo */ altura mínima: 100%; ancho mínimo: 1024px;/* Configurar escala proporcional */ ancho: 100%; altura: automático;

/* Configurar posicionamiento */ posición: fija;

arriba: 0; izquierda: 0;) @media pantalla y (ancho máximo: 1024px) (

/* Específico de esta imagen en particular */
img.bg (izquierda: 50%; margen izquierdo: -512px; /* 50% */))
img.bg ( /* Establecer reglas para rellenar el fondo */ min-height: 100%; min-width: 1024px; /* Configurar escala proporcional */ width: 100%; height: auto; /* Configurar posicionamiento */ posición: fijo arriba: 0; izquierda: 0; ) @media screen y (ancho máximo: 1024px) ( /* Específico de esta imagen en particular */ img.bg ( izquierda: 50%; margen izquierdo: -512px; / * 50% */ ) )

CSSFunciona en cualquier versión.

navegadores de calidad - Safari/Opera/Firefox y Chrome. Como siempre, IE tiene sus propios matices: IE 9 - obras; IE 7/8: la mayoría de las veces funciona correctamente, pero no centra imágenes más pequeñas que la ventana del navegador; IE 6: se puede personalizar, pero ¿quién necesita este navegador?

-hackear la opción 2

#bg ( posición:fija; arriba:-50%; izquierda:-50%; ancho:200%; altura:200%; ) #bg img ( posición:absoluta; arriba:0; izquierda:0; derecha:0; abajo:0; margen:automático; ancho mínimo:50%; alto mínimo:50% )

El truco funciona en:

Safari/Chrome/Firefox (también primeras versiones no probado, pero funciona bien en los últimos)
Es decir, 8+
Opera (cualquier versión) y junto con IE, ambos tienen errores de la misma manera con un error de posicionamiento.

Método con jQuery

Esta opción es mucho más sencilla (desde el punto de vista de CSS) si sabemos que la relación de aspecto de la imagen (img utilizada como fondo) es mayor o menor que la relación de aspecto actual de la ventana del navegador. Si es menor, entonces solo podemos usar ancho = 100% y la ventana se llenará igualmente en ancho y alto. Si es más, solo puede especificar altura = 100% para llenar toda la ventana.

Acceso a todos los datos van A través de JavaScript, los códigos utilizados son los siguientes:

#bg (posición: fija; arriba: 0; izquierda: 0;) .bgwidth (ancho: 100%;) .bgheight (alto: 100%;)

#bg ( posición: fija; arriba: 0; izquierda: 0; ) .bgwidth ( ancho: 100%; ) .bgheight ( altura: 100%; )

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(ventana).load(función() ( var theWindow = $(ventana), $bg = $("#bg"), aspectoRatio = $bg.width() / $bg.height(); función resizeBg() (si ((laVentana.ancho() / laVentana.alto())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

En mi opinión, en este caso no se realiza el centrado (hasta donde tengo entendido), pero se puede hacer. La mayoría de los navegadores de escritorio son compatibles, incluido IE7+. Finalmente, el autor del artículo sobre hacks ha preparado un conjunto de archivos de ejemplo en los que se implementa todo esto; puedes descargarlo. Los comentarios al artículo original también contienen algo de información y discusión, aunque el autor agregó la mayoría de los detalles importantes en forma de instrucciones a la publicación y yo también los traduje e indiqué. Por supuesto, los ejemplos te ayudarán a comprender todo esto. En general, si no fuera por los constantes "bromas" de IE7, todos los trucos mencionados serían ideales.

PD ¿Quieres comprar un libro? - No tienes que ir a la tienda porque ahora una librería online te permite hacer todo online: elegir, pagar y concertar la entrega a domicilio.

La resolución de los monitores crece constantemente y a la hora de diseñar páginas web debemos tener en cuenta la más amplia gama de resoluciones. Esto es especialmente importante cuando se utiliza una imagen de fondo que, con una resolución de monitor baja, está cortada o, por el contrario, no se ajusta por completo a una resolución alta. Una solución a esta situación es escalar el fondo. Por supuesto, esto promete algunos problemas, como la aparición de distorsiones y artefactos en las imágenes, pero también amplía el arsenal de herramientas de diseño.

La propiedad background-size es responsable de controlar el tamaño; la palabra clave cover se puede especificar como un valor, luego el tamaño de la imagen será tal que su ancho y alto se ajusten al área especificada (por ejemplo, la ventana de una página web); La palabra clave contiene escala la imagen para que al menos un lado de la imagen encaje completamente en el área especificada. También es aceptable proporcionar dimensiones horizontales o verticales explícitas en porcentajes u otras unidades CSS. En la figura. La Figura 1 muestra cómo las imágenes cambian de tamaño para diferentes valores de tamaño de fondo. Se resalta en gris un bloque de 280x200 píxeles, dentro del cual se establece el fondo.

Arroz. 1. Tipo de imágenes de fondo según el valor del tamaño del fondo.

El ejemplo 1 establece una foto de fondo que ocupa toda la ventana del navegador. Para hacer esto tuve que preguntar altura html y cuerpo al 100%.

Ejemplo 1. Imagen de fondo

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

Escala de fondo

El fondo también incluye un degradado, que también se puede escalar, obteniendo así una variedad de efectos. Por ejemplo, agregar tamaño de fondo a gradiente lineal, lo haremos repetir, lo que forma franjas degradadas alternas (ejemplo 2).

Ejemplo 2. Rayas verticales

Gradiente

El resultado del ejemplo se muestra en la Fig. 2.

Arroz. 2. Rayas degradadas verticales

Las rayas verticales y horizontales se pueden hacer no solo en degradado, sino también con bordes claros. Para hacer esto, debe especificar cuatro colores en los parámetros de degradado: del 0 al 50% el color de la primera franja y del 50% al 100% el color de la segunda franja. No es necesario escribir el primer color con 0% y el último color con 100%, el navegador los agrega automáticamente, por lo que nos limitaremos a solo dos valores; El ejemplo 3 muestra cómo crear rayas horizontales 50 píxeles de alto.

Ejemplo 3: rayas horizontales

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Gradiente

El resultado de este ejemplo se muestra en la Fig. 3.

Arroz. 3. Rayas horizontales

Dado que puedes agregar varios fondos al mismo tiempo, enumerando sus parámetros separados por comas, se puede hacer lo mismo con los degradados. Sólo uno de los colores debe ser translúcido; de lo contrario, los degradados se superpondrán entre sí. El ejemplo 4 utiliza dos degradados para el fondo de la página web, que se cruzan en ángulo recto, lo que combinado con el tamaño del fondo crea celdas.

Ejemplo 4. Dos gradientes

HTML5 CSS3 IE Cr Op Sa Fx

Gradiente

El resultado de este ejemplo se muestra en la Fig. 4.

Arroz. 4. Células

La combinación de un degradado y la propiedad de tamaño de fondo le permite obtener una amplia variedad de estilos. rellenos de fondo, creado sin utilizar imágenes de fondo.

Una de las tareas principales cuando diseño adaptativo- se trata de escalar imágenes (incluidas las de fondo) para que se muestren correctamente en dispositivos con diferentes resoluciones pantallas.

Con imágenes en la etiqueta. imagen Es simple: cuando estableces el ancho como porcentaje, la altura se escalará automáticamente. Este método no se puede aplicar a imágenes de fondo.

Este truco consiste en establecer el valor del porcentaje de relleno ( relleno) elemento. El método se publicó por primera vez en un antiguo artículo de blog A List Apart, pero aún funciona bien.

Supongamos que hay imagen de fondo 800 por 450 píxeles, y debes convertirlo en fondo con una relación de aspecto fija de 16:9. El siguiente código utiliza sangría. píxeles, pero todo funcionará con ellos. También hay un elemento de figura HTML5 para funcionamiento correcto en navegadores más antiguos puedes usar HTML5 shiv.

Div.column (ancho máximo: 800px;) figure.fixedratio (padding-top: 56,25%; /* 450px/800px = 0,5625 */)

Agregar un fondo

El elemento resultante se escala como se esperaba, pero si agrega una imagen de fondo, el resultado no será muy bueno. Usando el atributo tamaño de fondo: portada. Desafortunadamente, en Explorador de Internet 8 este método no funciona. Para resolver este problema, posicionamos el fondo usando posición de fondo. La imagen de fondo debe ser al menos tan ancha como ancho máximo elemento. De lo contrario, la imagen se recortará.

Columna Div ( /* La imagen de fondo debe tener 800 px de ancho */ ancho máximo: 800 px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ imagen-de-fondo: url(http://voormedia.com/examples/north-sea-regatta.jpg); tamaño-de-fondo: portada; -moz-fondo-tamaño: portada /* Firefox 3.6 */ posición-fondo: centro /* Internet Explorer 7/8 */ )

Supongamos que tiene una imagen de fondo grande que se ve muy bien en el escritorio. pero en dispositivo móvil será demasiado pequeño, así que la decisión correcta reducirá el ancho del fondo.

Por ejemplo, una imagen con un ancho de 800 por 200 píxeles (4:1) en una pantalla pequeña, con un ancho de 300 píxeles, debería reducirse a 150 píxeles (2:1). Contemos los atributos. altura Y tapa acolchada:

La figura muestra la relación de aspecto de la imagen de fondo en diferentes anchos. La pendiente del gráfico corresponde al atributo tapa acolchada, altura inicial - al atributo altura. El código resultante es:

Columna div ( /* El fondo la imagen debe tener 800 px de ancho */ max-width: 800 px; ) figure.fluidratio ( padding-top: 10%; /* pendiente */ altura: 120px; /* altura inicial */ imagen-de-fondo: url(http://voormedia.com/examples/amsterdam.jpg); fondo- tamaño: portada; -moz-fondo-tamaño: portada /* Firefox 3.6 */ posición-fondo: centro /* Internet Explorer 7/8 */ )

Usando SCSS para el cálculo

Atributos tapa acolchada y altura se puede calcular automáticamente utilizando preprocesadores como SCSS. Un ejemplo de esto:

/* Calcular la proporción de fluidos en función de dos dimensiones (ancho/alto) */ @mixin fluid-ratio($tamaño grande, $tamaño pequeño) ( $ancho-grande: nth($tamaño grande, 1); $ancho -pequeño: nésimo($tamaño pequeño, 1); $altura-grande: nésimo($tamaño grande, 2); $altura-pequeño: nésimo($tamaño pequeño, 2); / ($ancho-grande - $ancho-pequeño); $alto: $alto-pequeño - $ancho-pequeño * $pendiente * 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Este elemento tendrá una proporción fluida de 4:1 a 800 px a 2:1 a 300 px. */ @include fluid-ratio(800px 200px, 300px 150px) imagen de fondo: url(http://voormedia.com/examples/amsterdam.jpg);

En el mundo de la publicidad se aprovecha cada centímetro de espacio disponible para la imagen de una marca o producto, por lo que cada vez es más popular diseñar sitios web que El fondo externo llena toda la ventana del navegador.. Usando CSS esto es fácil de lograr. Todo lo que necesitas hacer es escribir la línea de código apropiada:

Cuerpo (fondo: #000 url(myBackground_1280x960.jpg) »centro centro fijo sin repetición;)

El ejemplo 1 muestra una imagen de fondo centrada de 1280 px X 960 px, donde área visible es fijo (es decir, no se desplaza junto con el documento).

¿Pero qué tamaño de imagen necesitas? Monitores y sistemas operativos se están desarrollando bastante rápido y, como resultado, tenemos una amplia gama de resoluciones de pantalla. Las resoluciones más populares en la actualidad son: 1024x768px, 1280x800px, 1280x1024px y 1440x900px. Sin embargo, con la llegada de los monitores HD y las pantallas profesionales que admiten resoluciones de hasta 2560x1600px, existen aún más opciones.

También hay muchos casos en los que es necesario baja resolución. Muchos usuarios reducen la ventana de su navegador para liberar espacio en la pantalla para otros fines, mientras que varios monitores mantienen una resolución de 800x600px. Además, no nos olvidemos del papel cada vez mayor de las computadoras portátiles.

En lugar de utilizar una imagen fija cierto tamaño, ¿no sería mejor escalar la imagen según el tamaño de la ventana? Desafortunadamente, CSS 2.1 no ofrece la posibilidad de escalar la imagen de fondo.

Existen varias técnicas artificiales, pero todas ellas se basan en elemento HTML img (en lugar de fondo en CSS). Estos métodos también utilizan posicionamiento absoluto para capas o tablas o secuencias de comandos que le permiten cambiar el tamaño de una imagen. Además, no todos estos métodos conservan las proporciones de la imagen, estirándolas de forma totalmente irreal.

Los fondos CSS3 salvan el día

W3C CSS define la propiedad tamaño de fondo, que satisface nuestras necesidades.

Significados interesantes:

Contener

Escala la imagen con manteniendo proporciones para que toda la imagen quepa dentro del bloque.

Cubrir

Escala la imagen manteniendo la relación de aspecto para que su ancho o alto sea igual al ancho o alto del bloque.

Contener En este caso La imagen encajará completamente en el navegador., omitiendo (ocultando) los campos opacos en la parte superior-inferior o en el lado izquierdo-derecho, cuando las proporciones de la imagen de fondo y la ventana del navegador no coinciden (en el ejemplo, se forma un espacio negro vacío). Como resultado, la imagen aparece "recortada". En el Ejemplo 2, el código del Ejemplo 1 se ha ampliado con una propiedad de tamaño de fondo establecida en Contener.

Cubrir. En este caso la imagen llenará completamente la ventana de visualización, en este proceso se cortarán “orejas” o “pelo” (irán más allá del monitor), pero visualmente la imagen no se verá “recortada”. este método Prefiero a todos los demás. Puede controlar la alineación de una imagen dentro de una ventana utilizando la propiedad de posición de fondo. En el Ejemplo 3, ampliamos nuevamente el código del Ejemplo 1, pero esta vez con una propiedad de tamaño de fondo configurada para cubrir.

Permite que el fondo se escale agregando el siguiente código:

Cuerpo (fondo: #000 url(myBackground_1280x960.jpg) »centro centro fijo sin repetición; -moz-fondo-tamaño: portada; tamaño de fondo: portada;)

propiedad de tamaño de fondo ya apoyado Navegador Firefox 3.6 (usando el prefijo –moz; Firefox 4 usará propiedades CSS3), Chrome 5, Safari 5 y Opera 10.54; y se incluirá en Internet Explorer 9. Webkit más antiguo y Versiones de ópera ya soportan la propiedad background-size, sin embargo su implementación se basa en proyectos anteriores que no incluyen palabras clave Contener y Cubrir.

Lado negativo este método es que no hay propiedades especiales que establezcan ancho mínimo y la altura de la imagen de fondo. Cuando la ventana del navegador se reduce a tamaño pequeño, el tamaño de la imagen de fondo también se reducirá a pequeño y el resultado de dicho escalado de la imagen a menudo no es deseable.

Agreguemos consultas de medios CSS3

El módulo (Módulo de consultas de medios CSS3 del W3C) traerá reglas condicionales, que proporcionará un orden condicional al clasificar la altura y el ancho del fondo. Esto nos permitirá escalar el fondo desde el ancho/alto mínimo y más. Las consultas de medios son compatibles con Firefox 3.5, Chrome, Safari 3, Opera 7 y también se incluirán en Internet Explorer 9.

Las siguientes reglas de estilo le indicarán al navegador que no escale la imagen de fondo a 1024x768px.

Cuerpo (fondo: #000 url(myBackground_1280x960.jpg) »centro centro fijo sin repetición; -moz-fondo-tamaño: portada; tamaño de fondo: portada;)
@media solo todo y (ancho máximo: 1024 px) y (alto máximo: 768 px) ( cuerpo ( -moz-background-size: 1024 px 768 px; tamaño de fondo: 1024 px 768 px; )
}

Tenga en cuenta que 1024x768px tiene las mismas proporciones que la imagen de fondo (1280x960px). Cuando se aplican diferentes proporciones, se puede obtener un salto repentino cuando se reduce la ventana del navegador.

Nuestros ejemplos finales, cuatro y cinco, agregan reglas @media para que nuestra imagen de fondo no tenga una escala inferior a 1024 X 768 píxeles. El ejemplo cinco muestra que si configuramos la propiedad background-position en left-bottom en lugar de center-center, podemos controlar cómo se alinea la imagen de fondo dentro de la ventana del navegador.