2012-05-27 10 views
7

Powiel możliwe:
Stretch and Scale a CSS image Background - With CSS onlycss tło pasuje do dział

Chcę ustawić div div tła obrazu (szerokość: 1000 min-wysokość: 710) i rozmiar obrazu to 753 x 308 kiedy próbuję ustawić to zdjęcie, nie dopasowuje się do rozmiaru div, co powinienem zrobić?

.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; 
} 

Klasa div jest

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

a kod jest

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

Czy próbujesz przeskalować obraz tła, aby dopasować (proporcjonalnie) lub rozciągnąć (zniekształcić) do DIV? – rcdmk

+0

obraz powinien pokrywać div. –

Odpowiedz

7

Spróbuj czegoś takiego:

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> 

Mam nadzieję, że to pomoże!

+1

Należy pamiętać, że negatywny zindeks może ukryć element w niektórych wersjach Firefoksa z powodu błędu, w którym element jest renderowany poniżej dokumentu. Może być już bezpieczny, nie testowałem wersji 3.6 ani nowszych. – rcdmk

+0

Cóż, przynajmniej zgodnie ze standardem, nie ma ograniczenia co do indeksu Z, zarówno wartość dodatnia, jak i ujemna –

+0

Masz rację. CSS 2.0 nie określa limitu, a 2.1 określa, że ​​wartości ujemne są dozwolone, ale stare wersje FF mają ten błąd. – rcdmk