영웅 이미지가 모바일에 중앙에 있지 않습니다.

-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 나 네이티브 자바 스크립트를 사용하여 이미지를 변경 한 것처럼 배경 이미지를 변경할 수 있습니다.

감사합니다.

출처

2016-07-09 23:59:30

은 코드를 추가했지만 변경 사항은 표시되지 않습니다. 생각? –

@ SteveO'Dell이 코드를 업데이트하고 .home-section에 추가하면 작동합니다. –

영웅 이미지가 모바일에 중앙에 있지 않습니다.

답변

관련 문제