視差効果作物画像、フルサイズの画像が表示されない

私は公にオンラインで使用した視差効果に問題があります。どうやらその効果は写真を切り取っているようだ。それはフルサイズでなければならず、画面サイズが変わっても、画像はフルサイズでなければなりません。私のウェブサイト、lunationboards.comで見ることができます。コードは以下の通りです。視差効果作物画像、フルサイズの画像が表示されない

HTML 
<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Lunation Boards</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%"> 
    <link rel = "stylesheet" href="stylesheet.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</head> 
<body> 
<header class="Header" id="myHeader"> 
    <a class = "headerLogo"> 
     <h1 class = "head" style=>Lunation Boards</h1> 
     <style> 
      a{text-decoration: none;} 
     </style> 

    </a> 
    <div class="socialmedia"> 
     <a class = "Facebook"> 
      <a href="https://www.facebook.com/LunationBoards/" target="_blank"><img src = "fbicon.png" width="50px" height="50px"></a> 
     </a> 
     <a class = "Instagram"> 
      <a href="https://www.instagram.com/lunationboards/" target="_blank"><img src = "Insta.png" width="50px" height="50px"></a> 
     </a> 
     <a class = "Youtube"> 
      <a href="https://www.youtube.com/channel/UC4qIP_3VKl2v_73t_2VFTfA" target="_blank"><img src = "tube.png" width="50px" height="50px"></a> 
     </a> 
    </div> 
</header> 
<div class="parallax-window" data-parallax="scroll" data-image-src="pic2.jpg"></div>

CSS

body { 
     margin: 0; 
     overflow-x: hidden; 
     padding: 0; 
     width: 100%; 
    } 

    .Header { 
     position: fixed; 
     z-index: 1; 
     width: 100%; 
     height: 80px; 
     background-color: black; 
     text-align: right; 
     overflow: hidden; 
    } 

    .head { 
     color: white; 
     font-family: 'Calibri Light'; 
     font-size: xx-large; 
     text-align: center; 
    } 
.header1 { 
     padding-top: 50px; 
     display: inline-block; 
     width: 90%; 
    } 
.parallax-window { 
     min-height: 900px; 
     background: transparent; 
     -webkit-background-size: contain; 
    }

出典

2017-05-22 Noah Tanenholtz

写真？写真のどの部分が切り取られますか？視差はモバイルデバイスや小型デバイスでは機能しません。デスクトップ視差ブツを非表示にするメディアクエリを使用その後

<div id="mobile-pic1"></div> 
CSS: 
#mobile-pic1 { 
    height: 80vh; 
    width: 100%; 
    background-image: url('photo.jpg'); 
    background-position: 1% 14%; // whatever suits you 
    background-size: cover; 
}

：

@media screen and (min-width: 500px) { 
    .parallax-window { 
     display: none; 
    } 
}

ことができますが、私は本当に疑問を取得しない場合は知ってはいけないあなたは、いくつかのモバイル固有のコードを試みることができます。

出典

2017-05-22 23:49:19

私は実際にイメージがどのように見えるかはわかりませんが、ポップアップする最初のイメージはイメージが小さく、他のホイールでボード全体が表示されますが、表示されません。 –

本当に助けが必要ですこの。私ができることは何ですか？ –

画像の背景位置を調整してみる必要があります。 Google Inspectを使用します。 –

視差効果作物画像、フルサイズの画像が表示されない

答えて

関連する問題