html - toda - Cambiar el tamaño de la imagen de fondo en div usando css

imagen de fondo en un div

Question

Esta pregunta ya tiene una respuesta aquí:

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

A continuación, css establece un fondo individual en dos divs; las imágenes se repiten si no encajan en el tamaño div.

¿Cómo puedo estirar las imágenes usando css para que quepan en el espacio requerido por div?

<style type="text/css">   
#contentMain {  
  margin-bottom: 5%; 
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  background: url( /jQuery/mypage/img/background1.png )
}  
#page1 {    
  background: url( /jQuery/mypage/img/background2.png )  
} 
</style> 

Answer 1

Responder

Tienes múltiples opciones:

1. background-size: 100% 100%; - la imagen se alarga (se puede conservar la relación de aspecto, dependiendo del navegador)
2. background-size: contain; - la imagen se estira sin cortarla mientras se conserva la relación de aspecto
3. background-size: cover; - la imagen cubre por completo el elemento al tiempo que conserva la relación de aspecto (la imagen se puede cortar)

/ edit: Y ahora, hay aún más: https://alligator.io/css/cropping-images-object-fit

Demostración en Codepen

Actualización 2017: vista previa

Aquí hay capturas de pantalla para que algunos navegadores muestren sus diferencias.

Cromo

Firefox

Borde

IE11

Mensaje para llevar

background-size: 100% 100%; produce el resultado menos predecible.

Recursos

• https://alligator.io/css/cropping-images-object-fit

Answer 2

Con la propiedad de w3.org/TR/css3-background/#the-background-size en esos navegadores que admiten esta nueva característica de CSS.

Answer 3

Yo recomendaría usar esto:

  background-repeat:no-repeat;
  background-image: url(your file location here);
  background-size:cover;(will only work with css3)

Espero que ayude: D

Y si esto no es compatible con sus necesidades, solo dígalo: puedo hacer un jquery para soporte de múltiples servidores.