CSS에서 배경 이미지를 지정하고 스마트폰으로 보면 배경이 중간에 끊기고(일탈)
.container의 너비를 width:100%로 설정하고 background:url(bg.jpg) top center no-repeat처럼 배경 이미지를 지정합니다.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
<style type="text/css">
body { margin:0; padding:0; }
.container {
width:100%;
height:1278px;
background:url(bg.jpg) top center no-repeat;
}
.inner {
width:960px;
background:yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">ここは、inner エリアです。</div>
</div>
</body>
</html>
스마트폰이라면 배경이 중간에 차단(일탈)돼 나타난다.
지정
min-width으로 해결할 수 있습니다.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS</title>
<style type="text/css">
body { margin:0; padding:0; }
.container {
width:100%;
+ min-width:960px;
height:1278px;
background:url(bg.jpg) top center no-repeat;
}
.inner {
width:960px;
background:yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">ここは、inner エリアです。</div>
</div>
</body>
</html>
Reference
이 문제에 관하여(CSS에서 배경 이미지를 지정하고 스마트폰으로 보면 배경이 중간에 끊기고(일탈)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/4cres/items/96910528e8019b95fba0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
