imagen de fondo Ajustar a div

Question

que tienen 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 una manera de mostrar la imagen de fondo sin cortarla?

Answer 1

Puede lograrlo con la propiedad background-size, que ahora es supported by most browsers.

para escalar la imagen de fondo para caber dentro del div:

background-size: contain; 

Para escalar la imagen de fondo para cubrir todo el div:

background-size: cover; 

JSFiddle example

También existe una filter for IE 5.5+ support , así como vendor prefixes for some older browsers.

Answer 2

Cambia el ancho y alto de su div o establece el tamaño del fondo.

Answer 3

también puede usar este:

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

No sé sus valores div, pero vamos a suponer que tienes esos.

height: auto; 
max-width: 600px; 

Una vez más, 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 el ancho máximo. Y en realidad no es complicado llenar un div con una imagen de fondo, solo asegúrate de darle un estilo al elemento padre de la manera correcta, para que la imagen tenga un lugar al que pueda acceder.

Chris

Answer 4

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

background-size: 100% 100%; 

Si no es así, la respuesta es el por @grc lo más apropiado.

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