Ho
body {
background: url(images/background.svg);
}
L'effetto desiderato è che questa immagine di sfondo avrà una larghezza uguale a quella della pagina, mentre l'altezza cambierà per mantenere la proporzione. Ad esempio, se l'immagine originale è 100*200 (qualsiasi unità) e il corpo è largo 600px, l'immagine di sfondo dovrebbe finire per essere alta 1200px. L'altezza dovrebbe cambiare automaticamente se la finestra viene ridimensionata. È possibile?
Al momento, Firefox sembra che faccia rientrare l'altezza e poi aggiusti la larghezza. È forse perché l'altezza è la dimensione più lunga e sta cercando di evitare il ritaglio? Io voglio ritagliare verticalmente, poi scorrere: nessuna ripetizione orizzontale.
Inoltre, Chrome mette l'immagine al centro, nessuna ripetizione, anche quando viene dato esplicitamente background-repeat:repeat
, che è comunque il default.
C'è una proprietà CSS3 per questo, cioè background-size
(controllo di compatibilità). Anche se si possono impostare valori di lunghezza, di solito si usa con i valori speciali contain
e 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 */
}
contain
e cover
Scusate il brutto gioco di parole, ma userò la foto del giorno di Biswarup Ganguly per la dimostrazione. Diciamo che questo è il vostro schermo, e l'area grigia è al di fuori del vostro schermo visibile. Per la dimostrazione, assumerò un rapporto 16x9.
Vogliamo usare la suddetta immagine del giorno come sfondo. Tuttavia, abbiamo ritagliato l'immagine a 4x3 per qualche motivo. Potremmo impostare la proprietà background-size
a qualche lunghezza fissa, ma ci concentreremo su contain
e cover
. Notate che assumo anche che non abbiamo manipolato la larghezza e/o l'altezza di body
.
contain
contenere
Scala l'immagine, preservando il suo aspect ratio intrinseco (se c'è), alla più grande dimensione tale che sia la sua larghezza che la sua altezza possano entrare nell'area di posizionamento dello sfondo.
Questo fa sì che l'immagine di sfondo sia sempre completamente contenuta nell'area di posizionamento dello sfondo, tuttavia, potrebbe esserci dello spazio vuoto riempito con il tuo background-color
in questo caso:
cover
copertura
Scala l'immagine, preservando il suo aspect ratio intrinseco (se esiste), alla dimensione più piccola tale che sia la sua larghezza che la sua altezza possano coprire completamente l'area di posizionamento dello sfondo.
Questo fa sì che l'immagine di sfondo copra tutto. Non ci sarà alcun colore di sfondo
visibile, tuttavia a seconda del rapporto dello schermo una grande parte della tua immagine potrebbe essere tagliata fuori:
!!!-- inizia lo snippet: js -->
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>
Sulla base dei consigli di https://developer.mozilla.org/en-US/docs/CSS/background-size ho finito con la seguente ricetta che ha funzionato per me
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Non sono sicuro di cosa stai cercando esattamente, ma dovresti davvero controllare questi eccellenti post del blog scritti da Chris Coyier di CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Leggi le descrizioni di ogni articolo e vedi se sono quello che stai cercando.
Il primo risponde alla seguente domanda:
C'è un modo per rendere un'immagine di sfondo ridimensionabile? Come dire, riempire lo sfondo di una pagina web da bordo a bordo con un'immagine, non importa la dimensione della finestra del browser. Inoltre, farla ridimensionare più grande o più piccola quando la finestra del browser cambia. Inoltre, assicuratevi che mantenga il suo rapporto (non si allunga in modo strano). Inoltre, non causa barre di scorrimento, taglia solo verticalmente se necessario. Inoltre, entra nella pagina come un tag inline .
Il secondo post'obiettivo è quello di ottenere quanto segue, una "immagine di sfondo su un sito web che copre l'intera finestra del browser in ogni momento. "
Spero che questo aiuti.