Esiste una proprietà CSS3 per questo, vale a dire background-size( controllo di compatibilità ). Mentre uno può impostare i valori di lunghezza, di solito viene utilizzato con i valori speciali containe cover. Nel tuo caso specifico, dovresti usare cover:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Eggsplanation per containecover
Ci scusiamo per il brutto gioco di parole , ma userò l' immagine del giorno di Biswarup Ganguly per dimostrazione. Diciamo che questo è il tuo schermo e che l'area grigia è fuori dallo schermo visibile. Per dimostrazione, assumerò un rapporto 16x9.
Vogliamo usare l'immagine del giorno di cui sopra come sfondo. Tuttavia, abbiamo ritagliato l'immagine su 4x3 per qualche motivo. Potremmo impostare la background-sizeproprietà su una lunghezza fissa, ma ci concentreremo su containe cover. Si noti che presumo anche che non abbiamo alterato la larghezza e / o l'altezza di body.
contain
contain
Ridimensiona l'immagine, mantenendo le proporzioni intrinseche (se presenti), alla dimensione massima in modo che sia la sua larghezza che la sua altezza possano adattarsi all'interno dell'area di posizionamento dello sfondo.
Questo si assicura che l'immagine di sfondo sia sempre completamente contenuta nell'area di posizionamento dello sfondo, tuttavia, background-colorin questo caso potrebbe esserci dello spazio vuoto riempito con il tuo :
cover
cover
Ridimensiona l'immagine, preservando le proporzioni intrinseche (se presenti), alla dimensione più piccola in modo tale che sia la sua larghezza che la sua altezza possano coprire completamente l'area di posizionamento dello sfondo.
Questo si assicura che l'immagine di sfondo copra tutto. Non sarà visibile background-color, tuttavia, a seconda del rapporto dello schermo, gran parte dell'immagine potrebbe essere tagliata:
Dimostrazione con codice attuale
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
html, body { height: 100%; }aiuto? Inoltre, tosse .