poner - CSS: Escala la imagen de fondo hacia abajo si es más grande que la ventana, mantén al 100% de lo contrario
imagen de fondo html5 (4)
Podría intentar crear una etiqueta html <img> con una id específica
p.ej
HTML
<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />
CSS
img#mybg {
position: fixed; //image will always be top: 0 left: 0 by default.
display: block; //make it a block for width to work.
width: 100%; //set default width
height: 100%; //set default height
max-width: 1920px; //set max width
max-height: 1080px; //set max height
z-index: -999999; //set z-index so it won''t overlap any other element.
}
Para el centrado dinámico, debe usar Javascript en combinación con un evento window.onresize .
Si necesita más información, editaré mi publicación en consecuencia.
Una buena alternativa que es muy fácil de usar (pero extiende su fondo) sería usar el plugin jquery backstretch . Te permite simplemente agregar una imagen de fondo a pantalla completa, que se escalará con resolución (que no es exactamente lo que quieres, pero la mejor alternativa que se me ocurre).
Me gustaría desplegar una imagen de fondo en el cuerpo de mi sitio web que se reduzca con la resolución de la ventana, pero no se escale más allá de su tamaño original (1920x1080). De esta forma, los usuarios con resoluciones más pequeñas aún pueden ver toda la imagen, pero los que están más allá no tienen un fondo escalado.
No parece que las imágenes de fondo admitan propiedades como el ancho máximo, que normalmente usaría para un propósito como ese.
¿Cuál podría ser la solución? ¿Es esto posible en CSS sin secuencias de comandos adicionales?
Solo una sugerencia realmente pequeña / rápida:
Dependiendo de cómo se ve, y todo fluye en conjunto, background-size:contain; podría ser una opción.
o, en su cuerpo, establezca el ancho máximo en 1920, establezca los márgenes en automático, y eso también podría funcionar para usted.
Usaría un div como envoltorio con un ancho máximo y establecería el fondo para ese div.
HTML
<body>
<div class="container">Content</div>
</body>
CSS
.container {
width: 100%;
max-width: 1920px; /* YOUR BG MAX SIZE */
background:url("bg.png") no-repeat;
background-size: 100%;
}
Puedes intentarlo así Cualquier tamaño de resolución de imagen funcionará como receptivo:
img#mybg {
position: fixed; //image will always be top: 0 left: 0 by default.
display: block; //make it a block for width to work.
width: 100%; //set default width
height: 100%; //set default height
max-width: 1920px; //set max width
max-height: 1080px; //set max height
z-index: -999999; //set z-index so it won''t overlap any other element.
background-size:100% 100%;
}