CSS3 arka plan boyutu: kapak görüntü kapağını dikey hale getirmiyor

Ekranı her zaman doldurmak istediğim bir arka plan resmiyle bir web sitesi oluşturmaya çalışıyorum.CSS3 arka plan boyutu: kapak görüntü kapağını dikey hale getirmiyor

Tarayıcı penceresi kısa ve geniş olduğunda, görüntünün genişlemesini istiyorum, böylece ekranın üst kısmı ekranın tamamını dolduracak ve geri kalan kısmı görünmeyecek.

Tarayıcı penceresi uzun ve ince olduğunda, görüntünün genişlemesini istiyorum, böylece ekranın sol kısmı tüm ekranı yüksekliğinde ve kalan kısmı görünmeyecek.

CSS3 arka plan boyutunun kullanılması: cover özelliği, bir çekiciyi bir çekicilik gibi çalışır, ikincisi yoktur. Bunun yerine, arka plan görüntüsü küçültülerek, kullanılabilir olan dar bölge içinde tamamen görülebilir ve genişliğe ölçeklendirilir, ardından sayfanın geri kalanı sadece arka plan rengidir.

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

Bu sorunu nasıl düzeltebilirim?

kaynak

2012-01-22 Andrew Latham

Kodunuzu gönderir misiniz? Olanlar olmamalıydı! – skybondsor

Elbette, ben sadece –

yaptım. Bu aynı sorunu yaşıyor mu? http://stackoverflow.com/questions/8217037/css3-background-size-can-i-guarantee-coverage – skybondsor

Sadece bir CSS arka plan resmi mi kullanıyorsunuz? Bu, bir görüntü yükleyerek ve CSS ile kısıtlayarak yapılabilir.

Bu örneklerden herhangi biri işe yarar mı?

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

Ya bu? Bu bir rastgele bir diziye bir veritabanından görüntüleri ve yükleri bunları yükler, ancak bu biraz bilgi toplamak mümkün olabilir:

PHP yük fonksiyonu

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

Bu seçenekler tarayıcı penceresini yükseklik ve genişliğe göre doldurmalıdır.

kaynak

2012-01-24 02:32:24

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

kaynak

2015-04-20 12:51:40 Habax

CSS3 arka plan boyutu: kapak görüntü kapağını dikey hale getirmiyor

cevap

İlgili konular