저의 첫 번째 질문에 저와 함께 해 주셔서 감사합니다. 나는 (나는 코드를 배우는 디자이너이다.) 많은 시도와 실수를했지만 Bootstrap을 배우고있다. 그러나 나는 그것을 좋아하고있다. 그래서 여기 거래가 있습니다 :모바일 장치에서 부트 스트랩 CSS 배경 위치가 작동하지 않습니다.
저는 회사 웹 사이트를 다시 디자인하고 모바일 장치 용 CSS에 미디어 쿼리를 추가하고 있습니다. 배경 위치를 추가하고 조정하면 Dreamweaver와 실시간 미리보기에서 조정 내용을 즉시 볼 수 있습니다. 하지만 내 모바일 장치 (iPad 및 iPhone 5)에서는 X 축이 이동하지만 Y 축은 이동하지 않습니다.
이 내 테스트 사이트 : 나는 모바일 화면 (필자는 Y 축 이미지를 이동하려는)에서 파도 배경을 볼 수 있도록 어떻게해야합니까 http://test.lighthousesoftware.com
?
<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;
}
}
감사합니다. Juan. 그것은 많은 도움이되었습니다. 나는 실제로 "fixed"에서 "scroll"으로 background-attachment를 바꾸는 것을 끝내었고 (당신이 공유 한 링크에있는 개발자 중 한 사람의 제안에서) 그걸로 갔다. –