¿Cómo hacer que la imagen de fondo se ajuste a toda la página sin repetir usando css simple?

Tengo una imagen JPG con un tamaño de 1024 x 724. El tamaño de mi página no es fijo. Mi requisito es: Si cambio el tamaño de la página, la imagen de fondo también debe cambiar de tamaño y ajustarse a la página.¿Cómo hacer que la imagen de fondo se ajuste a toda la página sin repetir usando css simple?

Además, no quiero mantener la información relacionada con la imagen en mi página HTML/JSP. Quiero hacer esto usando CSS simple. No estoy usando CSS3. Porque hay un atributo llamado background-size que puede hacer que la imagen se estire hasta el ancho y alto de la página. Actualmente, solo Google Chrome es compatible con esto. ¿Alguna ayuda?

Fuente

2010-11-03 User 1034

No se puede cambiar el tamaño de las imágenes de fondo con CSS2.

Lo que puede hacer es tener un recipiente que redimensiona:

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'> 
    <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' /> 
</div>

De esta manera, el div se sentará detrás de la página y ocupan todo el espacio, mientras que el cambio de tamaño, según sea necesario. El interior img cambiará el tamaño automáticamente para ajustarse al div.

Fuente

2010-11-03 08:46:12 Ben

No quiero mantener la imagen y su fuente en la página Html. –

¡Solución simple! Por cierto, también puede usar 'left: 0; top: 0; right: 0; bottom: 0;' en lugar de 'width: 100%; height: 100%'. –

(Por supuesto, no coloque el atributo 'style' en línea como mi ejemplo; use un bloque de estilos de encabezado o una hoja externa.) – Ben

intentar algo así como

background: url(bgimage.jpg) no-repeat; 
background-size: 100%;

Fuente

2010-11-03 08:42:51 heximal

Tenga en cuenta que 'background-size', como una propiedad de CSS3, actualmente no es muy compatible y las extensiones de los proveedores deben utilizarse también por el momento. – BoltClock

¡Hoy en día es bastante seguro usar esta propiedad! http://www.w3schools.com/cssref/css3_pr_background-size.asp – hugronaphor

background: url (bgimage.jpg) no-repeat; de fondo: tapa; Esto hizo el truco – degee

Puede usar JavaScript o CSS3.

Solución de JavaScript: Utilice una etiqueta de posición absoluta <img> y ajústela al tamaño de la página y cada vez que cambie el tamaño de la página. Tenga cuidado con posibles errores cuando intente obtener el tamaño de página/ventana.

Solución CSS3: Utilice la propiedad CSS3 background-size. Puede usar 100% 100% o contain o cover, dependiendo de cómo quiera que la imagen cambie de tamaño. Por supuesto, esto solo funciona en navegadores modernos.

Fuente

2010-11-03 08:46:22

Dependiendo del tipo de imagen que tenga, podría ser mejor volver a trabajar el diseño para que la imagen principal se desvanezca a un color sólido o un patrón repetible. Si centra la imagen en la página y tiene el color sólido como fondo.

Consulte http://www.webdesignerwall.com/trends/80-large-background-websites/ para ver ejemplos de sitios que utilizan fondos grandes o escalables.

Fuente

2010-11-03 10:13:32 james