Arka plan resmi dikey olarak% 100 kaplamıyor

Şu anda arka plan resmimin neden tam olarak gövdeyi kaplamadığını anlamaya çalışıyorsunuz. Tüm css görebildiğim kadar doğru ve yardım için başka yerler aramaya çalıştım. Aşağıda, gözden geçirilmesi gereken kodun yanı sıra gördüğüm şeyin ekran görüntüsü yer almaktadır. Bulut görüntüsü bir bütün olarak ele alınsa bile, bulutların altında görülebilen beyaz bir bölüm vardır. Herhangi bir fikir? Arka plan resmi dikey olarak% 100 kaplamıyor

ekran görüntüsü

burada bulunabilir:

<!doctype html> 
<html lang=""> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
     <script src="js/jquery-1.12.1.js"></script> 
     <script src="js/js1.js"></script> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       <div id="socialmediaicons"> 
        <img src="img/fb.png"> 
        <img src="img/twitter.png"> 
        <img src="img/g+.png"> 
       </div> 
       <h1>COMPUTER +</h1> 
       <h3>Services for both home, and business</h3> 
      </div> 
      <div id="sectionMain"> 
      </div> 
     </div> 
    </body> 
</html>

aşağıdaki css:

@import url(https://fonts.googleapis.com/css?family=Martel+Sans); 
@import url(https://fonts.googleapis.com/css?family=Oswald); 

* { 
    padding: 0; 
    border: 0; 
    margin: 0; 
    font-family: 'Martel Sans', sans-serif; 
} 
body { 
    background-image: url(../img/backg.jpg); 
    background-position-x: center; 
    background-position-y: top; 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-attachment: fixed; 
} 

/* 
__  __            
\ \ // _ __ __ _ _ __ _ __  ___ _ __ 
    \ \ /\// | '__|/_` | | '_ \ | '_ \ /_ \ | '__| 
    \ V V/ | | | (_| | | |_) | | |_) | | __/ | | 
    \_/\_/ |_|  \__,_| | .__/ | .__/ \___| |_| 
          |_|  |_|     
*/ 

#wrapper { 
    width: 85vw; 
    margin: 0 auto; 
} 

/* 
    _ _      _    
| | | | ___ __ _ __| | ___ _ __ 
| |_| |/_ \/_` |/_` |/_ \ | '__| 
| _ | | __/ | (_| | | (_| | | __/ | | 
|_| |_| \___| \__,_| \__,_| \___| |_| 

*/ 

#socialmediaicons { 
    width: 15%; 
    margin: 0 auto; 
} 
#socialmediaicons img { 
    width: 35px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 15px; 
} 
#header { 
    height: 830px; 
} 
#header h1 { 
    text-align: center; 
    font-size: 120px; 
    padding-top: 25px; 
    margin-top: 160px; 
    letter-spacing: 5px; 
    color: white; 
    text-shadow: 2px 2px 2px black; 
} 
#header h3 { 
    text-align: center; 
    padding-top: 10px; 
    font-size: 18px; 
    padding-bottom: 10px; 
    color: white; 
    text-shadow: 2px 2px 2px black; 
}

kaynak

2016-03-30 Warriorsfury

kullanım background-size: cover - Gerçi eski tarayıcılar tarafından desteklenmez

kaynak

2016-03-30 22:54:57 Johannes

istediğimizi yapar. – zeropublix

@zeropublix Eğer OP bir birimi (vw) kullanırsa (bkz. Söz konusu kod), vw'yi destekleyen tarayıcılar ayrıca arka plan boyutunu da destekleyecektir: kapak… – Johannes

Tamam, tamam. Ücretli geliştirmede iyi şeyler yapamayacağınız temel bir Uyarı. – zeropublix

Arka plan resmi dikey olarak% 100 kaplamıyor

cevap

İlgili konular