2012-05-27 28 views
7

Duplicar posible:
Stretch and Scale a CSS image Background - With CSS onlycss imagen de fondo ajuste a DIV

Quiero configurar div div imagen de fondo (anchura: 1.000, min-altura: 710) y el tamaño de la imagen es 753 x 308 whan tratando de configurarlo imagen no se está adaptando al tamaño div ¿qué debo hacer?

.Invitation { 
    background-color: transparent; 
    background-image: url('../images/form.png'); 
    background-repeat: no-repeat; 
    background-position: left top; 
    background-attachment: scroll; 
    background-size: 100%; 
    width: 1000px; 
    height: 710px; 
    margin-left: 43px; 
} 

La clase div es

.content { 
    clear:both; 
    width:1000px;  
    background:#e7e8e9; 
    background-image:url('../images/content.jpg'); 
    background-repeat:no-repeat; 
    background-position:left top; 
    min-height:710px; 
} 

y el código es

<div class="content"><div class="Invitation">form goes here....</div></div> 
+0

¿Está tratando de escalar la imagen de fondo para ajustar (proporcionalmente) o estirar (distorsionar) a la DIV? – rcdmk

+0

la imagen debe cubrir el div. –

Respuesta

7

intentar algo como esto:

CSS

<style type="text/css"> 
    img.adjusted { 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    top: 0; 
    left: 0; 
    } 
    .Invitation { 
    position: relative; 
    width: 1000px; 
    height: 710px; 
    margin-left: 43px; 
    } 
</style> 

HTML

<div class="Invitation"> 
    This is an example 
    <img src="http://files.myopera.com/arshamr/albums/612249/Nature%20(3).jpg" alt="" class="adjusted"> 
</div> 

espero que esto ayude!

+1

Tenga en cuenta que el zindex negativo puede ocultar el elemento en algunas versiones de Firefox debido a un error donde el elemento se muestra debajo del documento. Puede que ahora esté seguro, no he probado con 3.6 ni las versiones más nuevas. – rcdmk

+0

Bueno, al menos de acuerdo con la norma, no hay límite para el índice Z, ya sea de valor positivo o negativo –

+0

Tiene razón. CSS 2.0 no especifica un límite y 2.1 especifica que los valores negativos están permitidos, pero las versiones antiguas de FF tienen este error. – rcdmk

Cuestiones relacionadas