Dopasuj obraz tła do div

Mam obraz tła w poniższym div, ale obraz zostaje obcięty:

 <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">

Czy istnieje sposób na pokazanie obrazu tła bez jego odcinania?

Możesz to osiągnąć za pomocą background-sizewłaściwości, która jest teraz obsługiwana przez większość przeglądarek .

Aby przeskalować obraz tła, aby zmieścił się w div:

background-size: contain;

Aby przeskalować obraz tła, aby objąć cały div:

background-size: cover;

Przykład JSFiddle

Istnieje również filtr do obsługi IE 5.5+ , a także prefiksy dostawców dla niektórych starszych przeglądarek .

Jeśli potrzebujesz obrazu, który ma te same wymiary div, myślę, że jest to najbardziej eleganckie rozwiązanie:

background-size: 100% 100%;

Jeśli nie, odpowiedź @grc jest najbardziej odpowiednia.

Źródło: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Możesz użyć tych atrybutów:

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

i wtedy kod jest taki:

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

korzystasz również z tego:

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

Nie znam twoich wartości div, ale załóżmy, że je masz.

height: auto;
max-width: 600px;

Ponownie, są to po prostu liczby losowe. Wykonanie obrazu w tle (jeśli chcesz) może być trudne ze stałą szerokością dla div, więc lepiej użyć max-width. I tak naprawdę wypełnienie div obrazem tła nie jest skomplikowane, po prostu upewnij się, że odpowiednio nadałeś styl elementowi nadrzędnemu, aby na obrazie było miejsce, w które mógłby wejść.

Chris