css - tamaño - poner imagen de fondo en html que ocupe toda la pantalla
Establecer tamaño en la imagen de fondo con CSS? (18)
CSS2
Si necesita ampliar 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 otro contenido (y no se repetirá como parece que quiere) ...
CSS3 desata los poderes
Esto es posible hacerlo 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 gusta la cover y contain valores que nos dan un nuevo poder de control que antes no teníamos.
Redondo
También puede usar background-size: round que 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 una cantidad de veces en el área de posicionamiento de fondo.
Nota adicional
Si el tamaño que necesita es el tamaño de píxel estático, todavía es inteligente cambiar el tamaño de la imagen real. Esto es tanto para mejorar la calidad del tamaño (dado que su software de imagen funciona mejor que los navegadores) como para ahorrar ancho de banda si la imagen original es más grande de lo que se muestra.
¿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í ...
No demasiado difícil, si no tienes miedo de profundizar un poco más :)
Hay un argumento olvidado :
background-size: contain;
Esto no estirará su background-image como lo haría con la cover . Estiraría hasta que el lado más largo alcance el ancho o la altura del contenedor exterior y, por lo tanto, conserve la imagen.
Edición: También hay -webkit-background-size y -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, 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 en el XML.
Sin embargo, si está utilizando la misma imagen SVG en diferentes lugares y necesita que tenga diferentes tamaños, entonces usar background-size es muy útil. Los archivos SVG son intrínsecamente más pequeños que las imágenes de mapa de bits, 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 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 me funciona en OS X 10.7 con Firefox 8, Safari 5.1 y Chrome 16.0.912.63)
Esto es posible hacerlo en CSS3 con tamaño de fondo.
.backgroungImage {
background: url(''../imageS/background.jpg'') no-repeat;
background-size: 32px 32px;
}
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á bg.gif.
Si configura el tamaño del continente a
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.
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 .
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;
}
Puedes usar dos elementos <div> :
Uno es un contenedor (es el que originalmente deseaba que apareciera la imagen de fondo).
El segundo está contenido dentro. Establece su tamaño en el tamaño de la imagen de fondo (o el tamaño que desea que aparezca).
El div contenido se establece entonces para ser posicionado absolute . De esta manera, no interfiere con el flujo normal de elementos en el div que contiene.
Le permite utilizar imágenes de sprite de manera eficiente.
Si desea establecer background-size en la misma propiedad de background , puede usar:
background:url(my-bg.png) no-repeat top center / 50px 50px;
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 background-size es parte de CSS 3, pero no funcionará en la mayoría de los navegadores.
Para sus propósitos, simplemente haga la imagen real más grande.
Solo CSS 3 soporta eso,
background-size: 200px 50px;
Pero editaría la imagen en sí misma, de modo que el usuario necesite cargar menos, y podría verse mejor que una imagen reducida sin antialias.
Solo tienes que anidar divs para que sean compatibles con los navegadores
<div>
<div style="background: url(''bg.gif'') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Totalmente puedes 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 redimensionará el fondo según corresponda a medida que el elemento del cuerpo cambia de tamaño para resoluciones más pequeñas.
Aquí está el ejemplo: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Utilizo imágenes de fondo para los botones, pero solo muestra la imagen del mismo tamaño que el texto, incluso si configuro el ancho y la altura. En su lugar, relleno mi texto con Caracteres (espacios sin ruptura). Insisto en tantos como sea necesario, básicamente, hasta que aparezca todo el fondo del botón. Así que 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 -->
background-size: 200px 50px cámbielo a 100% 100% y se ajustará a las necesidades de la etiqueta de contenido como ul li o div ... probé
background-size está funcionando en Chrome 4.1, pero hasta ahora no pude hacerlo funcionar en Firefox 3.6.
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 del margen de un cuadro, por lo que si desea que el fondo solo esté en el contenido real de un cuadro, puede usar el margen en lugar del relleno.
En tercer lugar, puede controlar dónde comienza la imagen de fondo. Por defecto, es la esquina superior izquierda de un cuadro, pero puede controlarlo con background-position , de esta forma:
background-position: center top;
o quizás
background-position: 20px -14px;
El posicionamiento negativo se usa mucho con sprites CSS .
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;