내 배경 이미지와 해당 텍스트는 브라우저 높이가 최대 크기로 조정되는 한 너비 크기 조정에 반응합니다. 그러나 브라우저 (예 : Chrome) 높이를 줄이면 배경 이미지가 더 이상 전체 창에 맞지 않습니다. 어떤 제안이라도 도움이됩니다!
#header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/img/roses.jpg);
background-size: cover;
background-position: center center;
height: 100vh;
}
.name h1 {
font-family: 'Muli', sans-serif;
font-size: 500%;
font-weight: 300;
text-align: center;
padding-top: 10%;
}
.name p {
font-family: 'Play', sans-serif;
font-size: 150%;
text-align: center;
padding-top: 5%;
}
.navigation p {
display: inline;
}
.navigation {
text-align: center;
padding-top: 10%;
}
.contents:hover {
color: white;
text-decoration: none;
}
.contents {
color: whitesmoke;
text-decoration: none;
}
/* Media Queries */
@media (max-width: 33.9em) {
.name h1 {
font-size: 300%;
}
.name p {
font-size: 100%;
}
}<section id="header">
<div class="container">
<div class="row">
<div class="col-xs-12 name">
<h1>Temple Naylor</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 name">
<p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world. <br>
NOW AVAILABLE FOR YOU</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 navigation hidden-md-down">
<p><a class="contents" href="#">ABOUT</a> / </p>
<p><a class="contents" href="#">WORK</a> / </p>
<p><a class="contents" href="#">CONTACT</a> / </p>
<p><a class="contents" href="#">PHOTOGRAPHY</a></p>
</div>
</div>
</div>
</section>가까이 있지만 약간 떨어져 있습니다. 배경 크기 : 표지
body {
background: url(http://www.hd-wallpapersdownload.com/script/bulk-upload/3d-wallpaper-rose-dowload.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
업데이트 : OP가 텍스트가 축소됨에 따라 스크롤되는 것을 방지하고 싶다고 들었으므로 여기에 PX와 반대되는 VW의 텍스트 버전이 있으므로 응답 성이 있습니다.
반응 형 텍스트가있는 데모 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다