モバイルサイトでバナー画像を下に移動するにはどうすればいいですか

Question

私のバナー画像を少し下げて、被写体の頭が見えるようにします。デスクトップ版で見ることができるように、被験者の頭は完全に見えますが、モバイル版のウェブサイトでは頭が見えず完全な画像も見えません。完全な画像が見えるように、画像を少し下にするにはどうすればよいですか？このような

写真ウェブサイトの写真desktop version of the website

htmlコード

<header> 
     <div class="container"> 
      <div class="intro-text"> 
       <div class="intro-lead-in" style="font-family: 'Satisfy', cursive;">Welcome To ************</div> 
       <div class="intro-heading">The path you won't turn your back on</div> 
       <a href="#about" class="page-scroll btn btn-xl">About Us</a> 
      </div> 
     </div> 
    </header> 

CSSコードたぶん

header{ 
    background-image:url(../img/bg.jpg); 
    background-repeat:no-repeat; 
    background-attachment:scroll; 
    background-position:center center; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    background-size:cover; 
    -o-background-size:cover; 
    text-align:right; 
    color:black; 
} 
header .intro-text{ 
    padding-top:100px; 
    padding-bottom:50px; 

} 
header .intro-text .intro-lead-in{ 
    font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size:40px; 
    line-height:22px; 
    margin-bottom:20px; 
    text-align: right; 
} 
header .intro-text .intro-heading{ 
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight:800; 
    font-size:25px; 
    line-height:50px; 
    margin-bottom:50px; 
    text-align:right; 
    color: red; 
} 
@media (min-width:768px){ 
    header .intro-text{ 
     padding-top:350px; 
     padding-bottom:200px; 
    } 
    header .intro-text .intro-lead-in{ 
     font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size:40px; 
     line-height:40px; 
     margin-bottom:25px; 
     text-align:right; 
    } 
    header .intro-text .intro-heading{ 
     font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-weight:800; 
     font-size:25px; 
     line-height:75px; 
     margin-bottom:30px; 
     text-align: right; 
     color: red; 

    } 
} 

@media only screen and (max-width: 480px) { 
    header .intro-text{ 
    padding-top:140px; 
     padding-bottom:100px; 
     padding-left: 110px; 
    } 
    header .intro-text .intro-lead-in{ 
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style: italic; 
     font-size:26px; 
     line-height:22px; 
     margin-bottom:20px 
    } 
    header .intro-text .intro-heading{ 
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 

     font-weight:400; 
     font-size:17px; 
     line-height:18px; 
     margin-bottom:30px; 
     color: red; 
    } 
} 

Answer 1

Mobile version of the website 私のウェブサイトのモバイル版のようなもの？

@media only screen and (max-width: 480px) { 
    body { 
     padding-top: 50px; // or your navbar height 
    } 
} 

モバイルでコンテンツを50ピクセル下に移動します。

Answer 2

モバイルデバイスで背景の位置を変更できます。

@media screen and (max-width: 480px) { 
    header { 
     background-position: 0px 100px;//0px from left 100px from top 
    } 
} 

EDIT：またはあなたは良い大きさで、モバイル用の特定のイメージを使用することができます

Answer 3

私は、この問題を解決することができる一つのことは、あなたが属性「背景位置を削除していることを考える：センターセンター。 "メインから、それにattrの背景位置の第2の値を変更するページ（モバイル、デスクトップ）の各サイズの内側のメディアクエリを入れ、サンプルのため、このように滞在ウィル：

header{ 
 
    background-image:url('back.jpg'); 
 
    background-repeat:no-repeat; 
 
    background-attachment:scroll; 
 
    background-position:center center; 
 
    -webkit-background-size:cover; 
 
    -moz-background-size:cover; 
 
    background-size:cover; 
 
    -o-background-size:cover; 
 
    text-align:right; 
 
    color:black; 
 
} 
 

 
@media (min-width:768px){ 
 
    background-position:center 40px !important; 
 
} 
 

 

 
@media (min-width:480px){ 
 
    background-position:center 20px !important; 
 
}

私の英語で申し訳ありませんが、これがあなたを助けることを願っています。