私のヒーローイメージがモバイルの中央に配置されていません

-3

すべての画面の中央にきれいなコンテナイメージを作成しようとしています。私のヒーローイメージがモバイルの中央に配置されていません

<body> 

<!-- Preloader --> 
<div class="page-loader"> 
    <div class="loader">Loading...</div> 
</div> 

<!-- Navigation start --> 
<nav class="navbar navbar-custom navbar-transparent navbar-fixed-top"> 

    <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="index.html"> 
       <img src="assets/images/kerriwalshjenningswhite.png" alt="Kerri Walsh"> 
      </a> 
     </div> 

     <div class="collapse navbar-collapse" id="custom-collapse"> 

      <ul class="nav navbar-nav navbar-right"> 

       <li class="dropdown"> 
        <a href="https://www.kerriwalshjennings.co">Home</a> 
       </li> 

         <li class="dropdown"> 
         <a href="http://www.kerriwalshjennings.co/pages/gallery.html" target="_blank">Gallery</a> 
        </li> 

        <li class="dropdown"> 
         <a href="http://www.kerriwalshjennings.co/pages/sponsors.html" target="_blank">Sponsors</a> 
        </li> 

        <li class="dropdown"> 
         <a href="http://www.kerriwalshjennings.co/pages/bio.html" target="_blank">Bio</a> 
        </li> 

        <li class="dropdown"> 
         <a href="http://www.kerriwalshjennings.co/pages/contact.html" target="_blank">Contact</a> 
        </li> 

     </div> 

    </div> 

</nav> 
<!-- Navigation end --> 

<!-- Home start --> 
<section id="home" class="home-section home-parallax home-fade kenburns home-full-height"> 

    <div class="hero-slider"> 
     <ul class="slides"> 

      <li class="bg-light-30"> 
       <div class="img"> 
        <img src="assets/images/kerribig4.jpg" /> 
       </div> 

       <div class="hs-caption"> 
        <div class="caption-content"> 
         <p class="hs-title-size-1 font-serif mb-30"> 
          Hello & welcome 
         </p> 
         <h1 class="hs-title-size-5 font-alt mb-40"> 
          I am Kerri Walsh 
         </h1> 
         <a href="#about" class="section-scroll btn btn-border-w btn-circle">Learn More</a> 
        </div> 
       </div> 
      </li> 

      <li class="bg-light"> 
       <div class="img"> 
        <img src="assets/images/kerribig3.jpg" /> 
       </div> 

       <div class="hs-caption"> 
        <div class="caption-content"> 
         <p class="hs-title-size-1 font-serif mb-30"> 
          I am 
         </p> 
         <h1 class="hs-title-size-5 font-alt mb-40"> 
          A Mother 
         </h1> 
         <a href="#about" class="section-scroll btn btn-border-w btn-circle">Learn More</a> 
        </div> 
       </div> 
      </li> 

      <li class="bg-light"> 
       <div class="img"> 
        <img src="assets/images/kerribig2.jpg" /> 
       </div> 

       <div class="hs-caption"> 
        <div class="caption-content"> 
         <p class="hs-title-size-1 font-serif mb-30"> 
          I am 
         </p> 
         <h1 class="hs-title-size-5 font-alt mb-40"> 
          An Olympian 
         </h1> 
         <a href="#about" class="section-scroll btn btn-border-w btn-circle">Learn More</a> 
        </div> 
       </div> 
      </li> 

     </ul> 
    </div> 

</section > 
<!-- Home end -->

ここに私のstyle.cssの最初の部分があります。私はあなたがこれは私がしたいと思う背景画像、になりたい場合は、あなたが実際にケリー・ウォルシュ

html { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    -ms-overflow-style: scrollbar; 
} 

body { 
    background: #fff; 
    font: 400 13px/1.8 "Lato", sans-serif; 
    color: #666; 
    -webkit-font-smoothing: antialiased; 
} 

img { 
    /*width: 100%; */ 
    height: 100%; 
}

出典

2016-07-09 Steve O' Dell

ウェブサイト：www.kerriwalshjennings.co！ –

を見ることができるように、この画像は、携帯電話の画面の中央に表示されるようにする必要があります。

.home-section { 
    /* Location of the image */ 
    background-image: url(images/background-photo.jpg); 

    /* Background image is centered vertically and horizontally at all times */ 
    background-position: center center; 

    /* Background image doesn't tile */ 
    background-repeat: no-repeat; 

    /* Background image is fixed in the viewport so that it doesn't move when 
    the content's height is greater than the image's height */ 
    background-attachment: fixed; 

    /* This is what makes the background image rescale based 
    on the container's size */ 
    background-size: cover; 

    /* Set a background color that will be displayed 
    while the background image is loading */ 
    background-color: #464646; 
}

それは反応だとすべての画面でよく見るでしょう：その後、この方法を使用することができます。もちろん、画像を使ったように、jQueryやネイティブJavaScriptを使って背景画像を変更することもできます。

お礼、

出典

2016-07-09 23:59:30

はコードを追加しましたが、変更は見られません。思考？ –

@ SteveO'Dellがコードを更新し、.home-sectionに追加すると動作します。 –

私のヒーローイメージがモバイルの中央に配置されていません

答えて

関連する問題