Establecer el tamaño de la imagen de fondo con CSS?

¿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í …

CSS2

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 de fondo para otro contenido (y no se repita como usted parece querer) …

CSS3 desata los poderes

Esto es posible hacer en CSS3 con background-size .

Todos los navegadores modernos lo admiten, así que a menos que necesites 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 gusta la cover y contain valores que nos dan un nuevo poder de control que no teníamos antes.

Redondo

También puede usar background-size: round que tenga un significado en combinación con repeat:

 .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 un número entero de veces en el área de posicionamiento de 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 para mejorar la calidad del cambio de tamaño (dado que su software de imagen hace un mejor trabajo que los navegadores) y para ahorrar ancho de banda si la imagen original es más grande que lo que se muestra.

Solo CSS 3 lo admite,

 background-size: 200px 50px; 

Pero editaba la imagen en sí, de modo que el usuario necesita cargar menos, y podría verse mejor que una imagen encogida sin antialiasing.

Si sus usuarios usan solo Opera 9.5+, Safari 3+, Internet Explorer 9+ y Firefox 3.6+, la respuesta es sí. De otra manera no.

La propiedad de fondo es parte de CSS 3, pero no funcionará en la mayoría de los navegadores.

Para sus propósitos solo haga que la imagen real sea más grande.

No es posible El fondo siempre será tan grande como sea posible, pero puede evitar que se repita con 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 se encuentre en el contenido real de un cuadro, puede usar margen en lugar de relleno.

En tercer lugar, puedes controlar dónde comienza la imagen de fondo. Por defecto es la esquina superior izquierda de un recuadro, pero puedes controlarlo con background-position , así:

 background-position: center top; 

o quizás

 background-position: 20px -14px; 

El posicionamiento negativo se usa mucho con los sprites de CSS .

No es demasiado difícil, si no tienes miedo de profundizar un poco más 🙂

Hay un argumento olvidado :

 background-size: contain; 

Esto no ampliará su background-image como lo haría con la cover . Se estiraría hasta que el lado más largo scope el ancho o la altura del contenedor externo y, por lo tanto, preserve la imagen.

Editar: También hay -webkit-background-size y -moz-background-size .

La propiedad de fondo es compatible con IE9 +, Firefox 4+, Opera, Chrome y Safari 5+.

– Fuente: Escuelas W3

background-size: 200px 50px cámbialo al 100% 100% y escalará las necesidades de la etiqueta de contenido como ul li o div … lo probé

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, a continuación, volverá a ajustar el tamaño del fondo según corresponda a medida que el elemento del cuerpo cambie de tamaño para obtener resoluciones más pequeñas.

Aquí está el ejemplo: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

Solo tiene divs nesteds para que sean compatibles con varios navegadores

   
Put content here
Put content here

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.

Como 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 sean de diferentes tamaños, entonces usar background-size es muy útil. Los archivos SVG son intrínsecamente más pequeños que las imágenes ráster de todos modos y el cambio de tamaño sobre la marcha con CSS puede ser muy útil sin ningún costo de rendimiento que yo sepa, y sin duda una pérdida de calidad mínima o nula.

Aquí hay un ejemplo rápido:

 
content
.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)

Puede usar dos elementos

:

  • Uno es un contenedor (es en el que originalmente quería que aparezca 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 entonces se configura para posicionarse como absolute . De esta forma, no interfiere con el flujo normal de elementos en el div que contiene.

Le permite usar imágenes de sprites de manera eficiente.

No puede establecer el tamaño de su imagen de fondo con la versión actual de CSS (2.1).

Solo puede establecer: position , fix , image-url , repeat-mode y color .

 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 dependiendo del tamaño del contenedor.

si tiene un contenedor vacío con la url de fondo y cualquiera que sea el tamaño de fondo, no verá el bg.gif.

Si configura el tamaño del contínuo para

 background: url('bg.gif') top repeat-y; background-size: 490px; height: 490px; width: 490px; 

combinado con el código que escribió arriba, podrá ver el archivo bg.gif.

Si desea establecer background-size en la misma propiedad de background que puede usar, use:

 background:url(my-bg.png) no-repeat top center / 50px 50px; 

background-size funciona en Chrome 4.1, pero hasta ahora no podía hacerlo funcionar en Firefox 3.6.

Utilizo imágenes de fondo para botones, pero solo muestra la imagen del mismo tamaño que el texto, incluso si configuro ancho y alto. En cambio, relleno mi texto con   personajes (espacios sin ruptura). De todas formas, introduzco tantas como sea necesario, 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:

  

Por ejemplo:
La imagen de fondo siempre se ajustará al tamaño del contenedor (ancho 100% y alto 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 hacer en CSS3 con fondo de tamaño

 .backgroungImage { background: url('../imageS/background.jpg') no-repeat; background-size: 32px 32px; }