Achtergrondafbeelding aanpassen aan div

Ik heb een achtergrondafbeelding in de volgende div, maar de afbeelding wordt afgebroken:

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

Is er een manier om de achtergrondafbeelding weer te geven zonder deze af te knippen?

Antwoord 1, autoriteit 100%

U kunt dit bereiken met de background-sizeeigenschap, die nu wordt ondersteund door de meeste browsers.

De achtergrondafbeelding schalen zodat deze binnen de div past:

background-size: contain;

Om de achtergrondafbeelding te schalen om de hele div te bedekken:

background-size: cover;

JSFiddle-voorbeeld

Er bestaat ook een filter voor IE 5.5+ ondersteuning, evenals leveranciersvoorvoegsels voor sommige oudere browsers.

Antwoord 2, autoriteit 19%

Als je een afbeelding nodig hebt die dezelfde afmetingen heeft als de div, denk ik dat dit de meest elegante oplossing is:

background-size: 100% 100%;

Zo niet, dan is het antwoord van @grc het meest geschikte antwoord.

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

Antwoord 3, Autoriteit 2%

U kunt deze kenmerken gebruiken:

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

en u code is dan zo:

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

Antwoord 4

U gebruikt dit ook:

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

Ik ken je div-waarden niet, maar laten we aannemen dat je die hebt.

height: auto;
max-width: 600px;

Nogmaals, dat zijn gewoon willekeurige nummers.
Het kan heel moeilijk om de achtergrond-imago te maken (als je zou willen) met een vaste breedte voor de div, dus gebruik dus maximale breedte. En eigenlijk is het niet gecompliceerd om een ​​div te vullen met een achtergrondafbeelding, zorg ervoor dat u het ouderelement op de juiste manier styt, dus het beeld heeft een plaats waar het kan ingaan.

Chris

Antwoord 5

background-position-x: center;
background-position-y: center;

Antwoord 6

Probeer een van de volgende dingen,

background-size: contain;
background-size: cover;
background-size: 100%;
.container{
    background-size: 100%;
}