¿Es posible establecer el tamaño de la imagen de fondo con CSS?
Quiero hacer algo como:
background: url('bg.gif') top repeat-y;
background-size: 490px;Pero parece que es totalmente incorrecto hacerlo así ...
Respuestas:
Si necesita agrandar la imagen, debe editarla en un editor de imágenes.
Si usa la etiqueta img, puede cambiar el tamaño, pero eso no le daría el resultado deseado si necesita que la imagen sea fondo para algún otro contenido (y no se repetirá como parece).
Esto es posible hacer en CSS3 con background-size.
Todos los navegadores modernos admiten esto, por lo que, a menos que necesite admitir navegadores antiguos, esta es la forma de hacerlo.
Navegadores compatibles:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) y Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}En particular, me gustan los valores covery containque nos dan un nuevo poder de control que no teníamos antes.
También puede usar background-size: roundque tenga un significado en combinación con repetir:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}Esto ajustará el ancho de la imagen para que se ajuste varias veces en el área de posicionamiento del fondo.
Nota adicional
Si el tamaño que necesita es un tamaño de píxel estático, sigue siendo inteligente cambiar el tamaño físico de la imagen real. Esto es tanto para mejorar la calidad del cambio de tamaño (dado que su software de imagen hace un mejor trabajo que los navegadores) como para ahorrar ancho de banda si la imagen original es más grande de lo que se muestra.
Solo CSS 3 admite eso,
background-size: 200px 50px;Pero editaría la imagen en sí, para que el usuario necesite cargar menos, y podría verse mejor que una imagen reducida sin antialias.
background: url('resized_image.png')\9;
Si sus usuarios usan solo Opera 9.5+, Safari 3+, Internet Explorer 9+ y Firefox 3.6+, entonces la respuesta es sí. De otra manera no.
La propiedad de tamaño de fondo es parte de CSS 3, pero no funcionará en la mayoría de los navegadores.
Para sus propósitos, solo agrande la imagen real.
No es posible . El fondo siempre será tan grande como sea posible, pero puede evitar que se repita background-repeat.
background-repeat: no-repeat;En segundo lugar, el fondo no entra en el área de margen de un cuadro, por lo que si desea que el fondo solo esté en el contenido real de un cuadro, puede usar margen en lugar de relleno.
En tercer lugar, puede controlar dónde comienza la imagen de fondo. De forma predeterminada, es la esquina superior izquierda de un cuadro, pero puede controlar eso con background-position, de esta manera:
background-position: center top;o quizás
background-position: 20px -14px;El posicionamiento negativo se usa mucho con los sprites CSS .
Hay un argumento olvidado :
background-size: contain;Esto no estirará su background-imagecomo lo haría con cover. Se estiraría hasta que el lado más largo alcanzara el ancho o la altura del contenedor exterior y, por lo tanto, conservara la imagen.
Editar: También hay -webkit-background-sizey -moz-background-size.
La propiedad de tamaño de fondo es compatible con IE9 +, Firefox 4+, Opera, Chrome y Safari 5+.
En apoyo de la respuesta que dio @tetra, quiero señalar que si la imagen es un SVG, entonces no es necesario cambiar el tamaño de la imagen real.
Dado que un archivo SVG es solo XML, puede especificar el tamaño que desee que aparezca dentro del XML.
Sin embargo, si está utilizando la misma imagen SVG en diferentes lugares y necesita que sea de diferentes tamaños, entonces usar background-sizees muy útil. De todos modos, los archivos SVG son inherentemente más pequeños que las imágenes ráster y cambiar el tamaño sobre la marcha con CSS puede ser muy útil sin ningún costo de rendimiento que conozca, y ciertamente poca o ninguna pérdida de calidad.
Aquí hay un ejemplo rápido:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Nota: esto funciona para mí en OS X 10.7 con Firefox 8, Safari 5.1 y Chrome 16.0.912.63)
Puedes hacerlo totalmente con CSS3:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Esto ajustará el tamaño de una imagen de fondo al 100% del ancho del elemento del cuerpo y luego cambiará el tamaño del fondo en consecuencia a medida que el elemento del cuerpo cambie el tamaño para resoluciones más pequeñas.
Aquí está el ejemplo: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Solo tengo divs anidados para ser compatibles con el navegador cruzado
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Puedes usar dos <div>elementos:
Uno es un contenedor (es el que originalmente quería que apareciera la imagen de fondo).
El segundo está contenido dentro. Establece su tamaño al tamaño de la imagen de fondo (o el tamaño que desea que aparezca).
El div contenido se configura para ser posicionado absolute. De esta manera, no interfiere con el flujo normal de elementos en el div que contiene.
Le permite usar imágenes de sprites de manera eficiente.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Has escrito
background: url('bg.gif') top repeat-y;
background-size: 490px;pero solo verá el fondo según el tamaño del contenedor.
Si tiene un contenedor vacío con la URL de fondo y sea cual sea el tamaño del fondo, no verá el bg.gif.
Si establece el tamaño del continuo en
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;combinado con el código que escribió anteriormente, podrá ver el archivo bg.gif.
Utilizo imágenes de fondo para botones, pero solo muestra la imagen del mismo tamaño que el texto, incluso si configuro el ancho y la altura. En cambio, relleno mi texto con caracteres (espacios que no se rompen). Bofeteé tantas veces como sea necesario, básicamente, hasta que aparece todo el fondo del botón. Entonces podría tener un código como este:
En la hoja de estilo:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}En el documento HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Por ejemplo: la
imagen de fondo siempre se ajustará al tamaño del contenedor (ancho 100% y altura 100px).
CSS de navegador cruzado:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
Esto es posible hacerlo en CSS3 con tamaño de fondo
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Si desea establecer background-sizela misma backgroundpropiedad, puede usar:
background:url(my-bg.png) no-repeat top center / 50px 50px;