Poner imagen de fondo en css
imagen de fondo css de la carpeta
La propiedad CSS background-size permite cambiar el tamaño de la imagen de fondo de un elemento, anulando el comportamiento por defecto de poner la imagen a su tamaño completo especificando la anchura y/o la altura de la imagen. De este modo, puedes escalar la imagen hacia arriba o hacia abajo según lo desees.
Consideremos una imagen grande, una imagen del logo de Firefox de 2982×2808. Queremos (por alguna razón que probablemente implique un diseño de sitio horriblemente malo) poner en mosaico cuatro copias de esta imagen en un elemento de 300×300 píxeles. Para ello, podemos utilizar un valor de tamaño de fondo fijo de 150 píxeles.
El valor de contención especifica que, independientemente del tamaño de la caja contenedora, la imagen de fondo debe escalarse para que cada lado sea lo más grande posible sin exceder la longitud del lado correspondiente del contenedor. Pruebe a cambiar el tamaño del ejemplo siguiente para ver esto en acción.
El valor de cobertura especifica que la imagen de fondo debe ser dimensionada de manera que sea lo más pequeña posible, asegurando al mismo tiempo que ambas dimensiones sean mayores o iguales al tamaño correspondiente del contenedor. Pruebe a cambiar el tamaño del ejemplo siguiente para ver esto en acción.
imagen de fondo html
Cambiar el tamaño de las imágenes de fondo con background-sizeLa propiedad CSS background-size te permite cambiar el tamaño de la imagen de fondo de un elemento, anulando el comportamiento por defecto de embalar la imagen a su tamaño completo especificando la anchura y/o la altura de la imagen. De este modo, puedes escalar la imagen hacia arriba o hacia abajo según lo desees.Alicatar una imagen grandeConsideremos una imagen grande, una imagen del logotipo de Firefox de 2982×2808. Queremos (por alguna razón que probablemente implique un diseño de sitio horriblemente malo) colocar cuatro copias de esta imagen en un elemento de 300×300 píxeles. Para ello, podemos utilizar un valor de tamaño de fondo fijo de 150 píxeles.HTML<div class=»tiledBackground»>
Como puedes ver, el CSS es esencialmente idéntico, salvo el nombre del archivo de imagen.Valores especiales: «contain» y «cover «Además de los valores <length>, la propiedad CSS background-size ofrece dos valores de tamaño especiales, contain y cover. Echemos un vistazo a estos.containEl valor «contain» especifica que, independientemente del tamaño de la caja contenedora, la imagen de fondo debe escalarse para que cada lado sea lo más grande posible sin exceder la longitud del lado correspondiente del contenedor. Pruebe a cambiar el tamaño del ejemplo siguiente para ver esto en acción.
css background-image repeat
Esta técnica elimina una petición HTTP, lo cual es bueno. Pero, hay una serie de desventajas, así que antes de empezar a reemplazar todas tus imágenes asegúrate de considerar todos los pros y los contras de los URIs de datos.
Si una imagen de fondo no se carga, o su fondo degradado se ve en un navegador que no soporta degradados, el navegador buscará un color de fondo como alternativa. Puede especificar su color de reserva de esta manera:
Puede utilizar varias imágenes, o una mezcla de imágenes y degradados, para su fondo. Las imágenes de fondo múltiples están bien soportadas ahora (todos los navegadores modernos e IE9+ para imágenes gráficas, IE10+ para gradientes).
Cuando utilices varias imágenes de fondo, ten en cuenta que hay un orden de apilamiento algo contraintuitivo. Enumera primero la imagen que debe estar en la parte delantera y la que debe estar en la parte trasera en último lugar, así:
Si utiliza varias imágenes de fondo, a menudo tendrá que establecer más valores para el fondo para que todo esté en el lugar correcto. Si quieres usar la taquigrafía de fondo, puedes establecer los valores para cada imagen individualmente. Tu taquigrafía será algo así (fíjate en la coma que separa la primera imagen y sus valores de la segunda imagen y sus valores):
css background-image center
We can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.
Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.
Big thanks, as usual, to Doug Neiner for this alternate version. Here we use an inline <img> element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.
However, this doesn’t center the image and that’s a pretty common desire here… So, we can fix that by wrapping the image in a div. That div we’ll make twice as big as the browser window. Then the image will be placed, still preserving it’s aspect ratio and covering the visible browser window, and the dead center of that.