Ajustar imagen de fondo a div

334

Tengo una imagen de fondo en el siguiente div, pero la imagen se corta:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

¿Hay alguna manera de mostrar la imagen de fondo sin cortarla?

Rajeev
fuente
¿La imagen es más grande que el div?
grc
1
sí, la imagen es más grande que el div
Rajeev
1
imagen de fondo: url (/media/img_1_bg.jpg); tamaño de fondo: contener; repetición de fondo: sin repetición;
Waruna Manjula

Respuestas:

119

Si lo que necesita es que la imagen tenga las mismas dimensiones del div, creo que esta es la solución más elegante:

background-size: 100% 100%;

Si no, la respuesta de @grc es la más apropiada.

Fuente: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Alcantarilla
fuente
Finalmente encontré la solución para encajar todo el div con el fondo. ¡Gracias!
Kamil Rykowski
55
pero esto estiraría la imagen ... ¿hay alguna manera de ajustar la imagen de fondo sin estirarla?
Junaid
1
Sin embargo, la relación de aspecto se perdió.
Estudiante el
@Learner Si cambia las dimensiones de una imagen sin recortar la imagen, la relación de aspecto se perderá el 99% del tiempo. Es de sentido común.
Vaibhav Vishal
11

Puedes usar estos atributos:

background-size: contain;
background-repeat: no-repeat;

y tu código es así:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
hojjat.mi
fuente
8

también usas esto:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

No sé sus valores div, pero supongamos que los tiene.

height: auto;
max-width: 600px;

De nuevo, esos son solo números aleatorios. Podría ser bastante difícil hacer la imagen de fondo (si lo desea) con un ancho fijo para el div, así que mejor use max-width. Y en realidad no es complicado llenar un div con una imagen de fondo, solo asegúrese de diseñar el elemento padre de la manera correcta, para que la imagen tenga un lugar al que pueda ir.

Chris

cristiano
fuente
Enlace a una respuesta muy votada que habla sobre esta solución con más detalle: stackoverflow.com/questions/600743/… y le muestra cómo calcularla padding-top.
John Lee