2016-09-25 9 views
-1

大丈夫です。私の壁紙は壁紙を設定していますが、カットオフになっています。誰かが自分のコードを見て、何が間違っているか教えてください。 main.htmlから壁紙を削除しましたが、これまでのロックはありません壁紙を設定する際の問題

 <!DOCTYPE html> 
     <html> 
     <head> 
    <meta charset="utf-8"> 
    <title> Jihad Miski | Designer </title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
    <link rel="stylesheet" href="css/main.css"> 
    </head> 
    <body> 
    <header> 
     <a href="main.html" id="logo"> 
     <h1>Jihad Miski</h1> 
     <h2>Designer</h2> 
     </a> 
     <nav> 
     <ul> 
      <li><a href="main.html"></a></li> 
      <li><a href="about.html" id="about">About</a></li> 
      <li><a href="contact.html" id="contact">Contact</a></li> 
     </ul> 
     </nav> 
     </header> 
     <div id="wrapper"> 
     <section> 
     <ul id="gallery"> 
      <li> 
      <img src="img/wallpaper.jpg" alt=""> 
      </li> 
     </ul> 
     </section> 
     <footer> 
     <a href="http://instagram.com/ayrabfac"><img src="img/insta.jpeg" alt=""></a> 
     <p>&copy; 2016 Jihad Miski </p> 
      </footer> 
     </div> 
     </body> 
    </html> 











/******************************************* 
******************************************* 
*********** general ******************* 
******************************************* 
*******************************************/ 

body { 
    font-family: 'Poiret One', sans-serif; 

} 



    #wrapper { 
max-width: 930px; 
margin: 0 auto; 
padding: 0% 5%; 
background-color: transparent; 


} 


a { 
    text-decoration: none; 
} 


img { 
    max-width: 100%; 

} 



body { 
background-image: url('../img/wallpaper.jpg'); 
background-size: cover; 
background-position: center center; 
background-repeat: no-repeat; 
} 




/******************************************* 
******************************************* 
*********** positioning  **************** 
******************************************* 
*******************************************/ 

#logo { 
    position: fixed; /* or absolute */ 
    top: 40%; 
    left: 40%; 
    margin: 0; 
    } 


    nav { 
    text-align: center;  /* or absolute */ 
    top: 40% ; 
    left: 40% ; 
    } 




/******************************************* 
******************************************* 
*********** font  ******************* 
******************************************* 
*******************************************/ 


h1{ 
    font-family: 'Poiret One', sans-serif; 
    margin: 15px 0; 
    font-size: 3em; 
    font-weight: normal;; 
    line-height: 0.8em; 
} 

h2{ 
    font-family: 'Poiret One', sans-serif; 
    margin: 30px 0; 
    font-size: 1.24em; 
    font-weight: normal; 
    line-height: 0.8em; 
} 


/******************************************* 
******************************************* 
*********** color  ***************** 
******************************************* 
*******************************************/ 

    a { 
    color: #6ab47b; 
    } 

h1 , h2 { 
    color: #fff; 
} 

#about { 
    color: #808080; 
} 

#contact { 
    color: #808080; 
} 



/******************************************* 
******************************************* 
*********** footer ******************* 
******************************************* 
*******************************************/ 

footer { 
    font-size: 1em; 
    text-align: center; 
    padding-top: 50px; 
    color: #808080; 
} 
+0

これを実際の画像でデモできますか? –

答えて

0

あなたのコードをローカルで実行しても問題はありません。あなたが「切り取られている」と言ったら、あなたの写真(wallpaper.jpg)を参照していますか?

左右の画像の余白をautoに設定してみてください。

img { 
    max-width:100%; 
    margin-left:auto; 
    margin-right:auto; 
} 
+0

ここにスクリーンショットを表示する方法はありますか?私がそのコードを実行すると、私に壁紙が半分の大きさになった! –

+0

それはまだ切断されていますか?それとも半分の大きさのフルイメージですか? –

+0

そのすべての良い私はそれをありがとう –

関連する問題