2017-05-03 4 views
0

저의 첫 번째 질문에 저와 함께 해 주셔서 감사합니다. 나는 (나는 코드를 배우는 디자이너이다.) 많은 시도와 실수를했지만 Bootstrap을 배우고있다. 그러나 나는 그것을 좋아하고있다. 그래서 여기 거래가 있습니다 :모바일 장치에서 부트 스트랩 CSS 배경 위치가 작동하지 않습니다.

저는 회사 웹 사이트를 다시 디자인하고 모바일 장치 용 CSS에 미디어 쿼리를 추가하고 있습니다. 배경 위치를 추가하고 조정하면 Dreamweaver와 실시간 미리보기에서 조정 내용을 즉시 볼 수 있습니다. 하지만 내 모바일 장치 (iPad 및 iPhone 5)에서는 X 축이 이동하지만 Y 축은 이동하지 않습니다.

이 내 테스트 사이트 : 나는 모바일 화면 (필자는 Y 축 이미지를 이동하려는)에서 파도 배경을 볼 수 있도록 어떻게해야합니까 http://test.lighthousesoftware.com

Here are my mobile screens

?

<header> 
    <div class="header-content"> 
     <div class="header-content-inner"> 
      <h1 id="homeHeading">Automated Business Process,<br>Your Business Intelligence </h1> 
      <hr> 
      <p>Prism vice artisan, venmo migas you probably haven't heard of them crucifix meditation organic marfa cardigan. Dreamcatcher banh mi synth, organic flannel hell of gastropub keffiyeh marfa poke roof party. </p> 
      <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a> 
     </div> 
    </div> 
</header> 

그리고 내 CSS :

header { 
     position: relative; 
     width: 100%; 
     min-height: auto; 
     background-size: cover; 
     background-image: 
     url("https://lssinc.com/files/original/header.jpg"); 
     text-align: center; 
     background-attachment: fixed; 
     background-position: 25% 0; 
     color: white; 
     height: 80%; 
    } 
    @media only screen and (max-width: 1024px) { 
     header { 
      background-image: url(url("https://lssinc.com/files/original/header.jpg"); 
      background-size: cover; 
      background-repeat: no-repeat; 
      background-position: 0px 20px; 
      background-attachment: fixed; 
      color: white; 
      height: 80%; 
      text-align: center; 
     } 
    } 
    @media only screen and (max-width: 320px) { 
     header { 
      background-image: url("https://lssinc.com/files/original/header.jpg"); 
      background-size: cover; 
      background-repeat: no-repeat; 
      background-position: -70px -80px; 
      background-attachment: fixed; 
      color: white; 
      height: 150%; 
      text-align: center; 
     } 
    } 

답변

0

큰 문제

여기 내 HTML입니다! 나는이 질문이 이미 here이라고 대답했다고 믿는다. 문제는 background-size : 표지에 있습니다.

+0

감사합니다. Juan. 그것은 많은 도움이되었습니다. 나는 실제로 "fixed"에서 "scroll"으로 background-attachment를 바꾸는 것을 끝내었고 (당신이 공유 한 링크에있는 개발자 중 한 사람의 제안에서) 그걸로 갔다. –