Rozmiar tła CSS3: okładka nie pokrywa obrazu w pionie

Próbuję utworzyć witrynę z obrazem tła, który zawsze chcę wypełnić cały ekran.Rozmiar tła CSS3: okładka nie pokrywa obrazu w pionie

Gdy okno przeglądarki jest krótkie i szerokie, chcę, aby obraz się rozszerzył, aby jego górna część wypełniała cały ekran, a reszta nie była widoczna.

Gdy okno przeglądarki jest wysokie i cienkie, chcę, aby obraz się rozszerzył, aby lewa jego część wypełniała cały ekran w pionie, a reszta nie była widoczna.

Korzystanie z właściwości CSS3 background-size: cover sprawia, że poprzednia działa jak urok, druga nie. Zamiast tego obraz tła jest pomniejszany, tak aby był całkowicie widoczny w wąskim obszarze dostępnym i skalowanym do szerokości, a następnie reszta strony pod nim jest po prostu kolorem tła.

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; 
}

Jak mogę rozwiązać ten problem?

Źródło

2012-01-22 Andrew Latham

Czy możesz napisać swój kod? Tak nie powinno być, co się dzieje! – skybondsor

Pewnie, właśnie zrobiłem –

Czy rozwiązuje to ten sam problem, który masz? http://stackoverflow.com/questions/8217037/css3-background-size-can-i-guarantee-coverage – skybondsor

Czy jesteś zainteresowany wykorzystaniem tylko obrazu tła CSS? Można to zrobić, ładując obraz i ograniczając go za pomocą CSS.

Czy któryś z tych przykładów zadziała?

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% */ 
     } 
}

Albo ten jeden? Ten wczytuje obrazy z bazy danych do tablicy i ładuje je w sposób losowy, ale może być w stanie zebrać pewne informacje z tego:

funkcja obciążenia 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; 
}

Te opcje powinny wypełnić okno przeglądarki zgodnie z wysokością i szerokością.

Źródło

2012-01-24 02:32:24

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

Źródło

2015-04-20 12:51:40 Habax

Rozmiar tła CSS3: okładka nie pokrywa obrazu w pionie

Odpowiedz

Powiązane problemy