2015-01-07 9 views
1

모바일 장치에 내 배경을 표시하는 데 도움이 필요합니다. 현재 코드는 내 브라우저에서 작동하지만 모바일 장치를 방문하면 배경이 위쪽까지 크롤링되고 표시되지 않습니다. , 다른 이미지의 div도 % i에 대한 반응이 없습니다. (모바일 장치에서 사이트를 더 잘 만들 수 있기 때문에 실제로 퍼센트를 사용해야합니다.)모바일 장치에 CSS 배경 이미지가 표시되지 않습니다.

이 코드는 작동했지만 CSS에는 없었지만 HTML로 작성되었습니다. 이제는 CSS를 사용할 수 있기 때문에 사용할 수 있습니다. 배경으로 더 이상 사진을 다운로드하지 마십시오.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="favicon" type="image/ico" href="favicon.ico"/> 
 
<title>Rolling Barrel :: Sport & Game</title> 
 
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt."> 
 
<style> 
 
body#background { 
 
\t background: url('background.jpg') no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t -webkit-background-size: cover; 
 
\t background-color: #e0e0e0; 
 
\t background-size: 100% 100%; 
 
} 
 

 
div { 
 
\t position: absolute; 
 
\t top: 20%; 
 
\t left: 11%; 
 
\t width: 37%; 
 
\t height: 70%; 
 
\t overflow-y: scroll; 
 
\t overflow-x: hidden; 
 
} 
 

 
div img { 
 
\t width: 100%; 
 
} 
 
</style> 
 
</head> 
 
<body id="background"> 
 
<div> 
 
    <img src="text.png" alt=""/> 
 
</div> 
 
</body> 
 
</html>

나는 BTW 사이트를 볼 수 내 안드로이드 전화를 사용했다. 누군가가 나를 도울 수 있거나 나에게 올바른 방향으로 밀어 줄 수 있기를 바랍니다.

대단히 감사합니다!

답변

0

배경 이미지 속성을 #background에 배치하거나 CSS (body)에 둘다 둘 필요가 없습니다. 이미지를 포함하고 싶을 수도 있습니다.이 경우, 요소 이름 (#background)을 사용하고 이미지가 번지면 오버플로를 none으로 설정할 수 있습니다.

더 궁금한 점이 있거나 도움이 필요하면 의견을 말하면 JS Fiddle을 설정해 드리겠습니다.

관련 문제