poner - ¿Cómo hacer que la imagen de fondo se ajuste a toda la página sin repetir el uso de CSS simple?

imagen de fondo responsive bootstrap

Question

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 el tamaño y ajustarse a la página.

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

Answer 1

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

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

Answer 2

Estas tres líneas todas juntas funcionaron para mí.

background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;

Answer 3

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

Lo que puedes hacer es tener un contenedor 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 ocupará todo el espacio, mientras cambia el tamaño según sea necesario. El img interior se redimensionará automáticamente para ajustarse a la div .

Answer 4

Puedes usar JavaScript o CSS3.

Solución de JavaScript: utilice una etiqueta <img> posicionada absoluta y cambie su tamaño en la carga de la página y cada vez que la página cambie de tamaño. Tenga cuidado con los posibles errores al intentar obtener el tamaño de la página / ventana.

Solución CSS3: use la propiedad de background-size CSS3. Puede usar 100% 100% o contain o cover , dependiendo de cómo desee cambiar el tamaño de la imagen. Por supuesto, esto solo funciona en los navegadores modernos.

Answer 5

fondo: url (bgimage.jpg) no-repetir; tamaño de fondo: cubierta;

Esto hizo el truco

Answer 6

intenta algo como

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