2014-09-02 1 views
0
모바일

에 나는 문제가 모바일 장치 여기 배경은 PC 중심으로하지만,

에 제대로 표시 내 웹 사이트를 얻는 데없는 내 CSS에서 사용되는 코드는, 이것은 내가가 수행 할 작업입니다 너무 모바일 장치 : 내가 잘못 한 일을 아무 생각

html { 
    background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg); 
    background-attachment: scroll, scroll; 
    background-color: #000; 
    background-repeat: no-repeat, repeat-y; 
    background-position: center top, center top; 
} 

html, body { 
    width:100%; 
    height:100%; 
} 

, 나는 수정의 몇 가지를 시도하고 나는 그것이 작동되도록 할 수 없었다. 누군가 도울 수 있습니까? 아래 링크.

enter image description here

My website - http://renoized.com

+0

'background-size : 100 %'시도해 주시겠습니까? – khakiout

+0

[이 질문] (http://stackoverflow.com/questions/3183467/css-background-position-not-working-in-mobile-safari-iphone-ipad)의 사용자와 동일한 문제가있을 수 있습니다. 아마도, iOS 브라우저는 'body'태그의 배경 이미지를 센터링하는 것을 지원하지 않습니다 ... 이것은 Android에서도 마찬가지 일 수 있습니다. 제안 된 해결 방법은 래퍼를 사용하여 이미지를 적용하는 것입니다. 지금 테스트 할 도구가 필요하지 않습니다. –

+0

@khakiout 추가했습니다. 작동하지 않는 것 같습니다. – Renoized

답변

1

당신이 시도하거나 수 :

배경 크기 : 덮개;

또는

절대 위치 및 -999의 Z- 인덱스 값을 이용하여 대신에 배경 이미지를 사용한다. iOS는 100 % 너비의 배경 이미지를 지원하지 않으므로

+0

두 번째 방법으로 반복 이미지를 만들 수 있습니까? 나는 첫번째와 슬프게도 주사위를 굴려 보았습니다. 이미지가 변경되었지만 데스크톱에서는 너무 커서 크기가 너무 작습니다. 혼란 스럽네. – Renoized

+0

미디어 쿼리를 사용하여 문제를 해결할 수 있습니다. 예를 들어, 미디어 쿼리를 사용하여 배경 이미지를 숨기고 화면이 태블릿/모바일 크기가되면 이미지 수정을 다시 표시합니다. 나는 그것이 희망적이다. 저에게 알려주지 않는다면, 나는 코데펜을 만들 것입니다 : D –

+0

당신이 묘사 한 방법이 아래에서 발견 한 해결책과 매우 흡사하다고 생각합니다. 이 질문을하는 사람들에게 도움이된다고 생각한다면 미래의 스택 사용자를위한 코드를 설명 할 가치가있을 것입니다. – Renoized

0

내가 문제를 해결하는 데 사용했던 방법은 우아함 또는 우아함에 관계없이 this입니다.

html { 
    background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg); 
    background-attachment: scroll, scroll; 
    background-color: #000; 
    background-repeat: no-repeat, repeat-y; 
    background-position: center top, center top; 
} 

를 내 경우 #page 내 콘텐츠 컨테이너 태그로 :

내가해야 할 일을했을 모든

여기에서 CSS를 복사했다.

콘텐츠의 고유 한 배경을 정확한 위치에 제공합니다. 또한 장치 너비가 내용보다 작 으면 배경이 움직이는 .desktop에서 문제가 수정되었습니다. <div>

관련 문제