Formato sfondo CSS3: la copertina non rende la copertina dell'immagine in verticale

Sto cercando di creare un sito Web con un'immagine di sfondo che voglio riempire sempre l'intero schermo.Formato sfondo CSS3: la copertina non rende la copertina dell'immagine in verticale

Quando la finestra del browser è corta e larga, voglio che l'immagine si espanda in modo che la parte superiore di esso riempia l'intero schermo in base alla lunghezza e il resto non sia visibile.

Quando la finestra del browser è alta e sottile, voglio che l'immagine si espanda in modo che la parte sinistra di esso riempia l'intero schermo in senso verticale e il resto non sia visibile.

Utilizzando la dimensione di sfondo CSS3: la proprietà di copertina rende il precedente lavoro come un fascino, il secondo no. Invece, l'immagine di sfondo viene ridotta in modo che sia interamente visibile all'interno della ristretta area disponibile e ridimensionata in base alla larghezza, quindi il resto della pagina sotto è semplicemente il colore di sfondo.

body { 
    background-color: #BF6F30; 
    color: black; 
    font-family: Georgia, "Times New Roman", sans-serif; 
    background: url(' ... '); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Come posso risolvere questo problema?

fonte

2012-01-22 Andrew Latham

Puoi pubblicare il tuo codice? Questo non dovrebbe essere quello che sta succedendo! – skybondsor

Certo, l'ho appena fatto –

Questo indirizzo ha lo stesso problema che stai riscontrando? http://stackoverflow.com/questions/8217037/css3-background-size-can-i-guarantee-coverage – skybondsor

Sei interessato solo a utilizzare un'immagine di sfondo CSS? Questo può essere fatto caricando un'immagine e vincolandola con il CSS.

Uno di questi esempi funzionerebbe?

HTML

<body id="page-body"> 
<img class="bg" src="images/bodyBackground1.jpg"> 
<div class="wrapper"> 


</div> 
</body>

CSS

html { 
     background: url(images/bodyBackground1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

body { 
    background:#fff; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
} 

html, body { 
    height: 100%; 
} 

img.bg { 
     /* Set rules to fill background */ 
     min-height: 100%; 
     min-width: 1024px; 

     /* Set up proportionate scaling */ 
     width: 100%; 
     height: auto; 

     /* Set up positioning */ 
     position: fixed; 
     top: 0; 
     left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
     img.bg { 
       left: 50%; 
       margin-left: -512px; /* 50% */ 
     } 
}

o questa? Questo carica le immagini da un database in un array e li carica a caso, ma si potrebbe essere in grado di raccogliere alcune informazioni da questo:

funzione del carico PHP

<?php 
    $bg_images = array(
     0 => 'comp1.png', 
     1 => 'comp2.png', 
     2 => 'comp3.png', 
     .... 
    ); 
    $image = $bg_images[ rand(0,(count($bg_images)-1)) ]; 
    $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>"; 
?>

HTML

... 
<body> 
<?php echo $showBG; ?> 
<div id="wrapper"> 
...

CSS

html, body { 
    margin:0; 
    height:100%; 
} 

img.source-image { 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
    min-width:1024px; 
}

Queste opzioni devono riempire la finestra del browser in base all'altezza e alla larghezza.

fonte

2012-01-24 02:32:24

body { background: url("...") no-repeat center center fixed; background-size: cover; }

fonte

2015-04-20 12:51:40 Habax

Formato sfondo CSS3: la copertina non rende la copertina dell'immagine in verticale

risposta

Problemi correlati