배경 표지 크로스 브라우저에 가장 좋은 방법은

나는 웹 페이지의 배경으로 사용하려는 1024 * 768px 이미지가 있습니다.배경 표지 크로스 브라우저에 가장 좋은 방법은

또한이 배경은 크기가 조정 된 경우에도 전체 배경의 배경을 덮기를 원합니다. 그리고 .... 나는 가능한 한 최소한 스트레칭을하는 이미지가 없다!

jquery를 제외하고 여기 예제를 시도해 보았습니다. CSS로만 수행하는 것이 더 좋기 때문에.

감사합니다.

편집 : http://css-tricks.com/perfect-full-page-background-image/

출처

2011-05-05 jack

난 당신이 요구하는지 모르겠어요 - 그 기사는 이미 각 방법의 장단점을 커버 그 에 대해 이야기합니다. – thirtydot

네, 그게 무슨 기사에 있어요 – sandeep

거기에 다른 솔루션이 있다면 그냥 방황했다, 아무도 내 목적에 맞는 100 %. 나는 어쨌든 그들 중 하나를 고수하게 될 수도 있습니다. – jack

당신은 backstretch 그것은 하나 개의 라인 자바 스크립트 솔루션입니다

플러그인을 시도 할 수, 당신의 헤더에 (JQuery와도)를 포함하고 예제로 전화 : 여기 링크입니다 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script src="jquery.backstretch.min.js"></script> 
<script> 
    // To attach Backstrech as the body's background 
    $.backstretch("path/to/image.jpg"); 
</script>

공식 페이지 : http://srobbin.com/jquery-plugins/backstretch/

Github에서 소스 : https://github.com/srobbin/jquery-backstretch

출처

2012-05-01 05:47:38

While 이 링크는 질문에 대답 할 수 있습니다. 여기에 답변의 핵심 부분을 포함시키고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않게 될 수 있습니다. – Andy

Andy 정보를 제공해 주셔서 감사합니다. –

나는 좋은 CSS가 이와 같은 것들에 유용 할 수 있다고 생각합니다. 이 데스크탑 브라우저에서 잘 작동하고 내 아이폰/아이 패드 :

html { 
    background: url(YOUR-IMAGE-URL) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 100%; 
    overflow: hidden; 
} 

body { 
    background: url(YOUR-IMAGE-URL) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 100%; 
    overflow: auto; 
}

출처

2014-05-02 18:50:07 ColossalChris

배경 표지 크로스 브라우저에 가장 좋은 방법은

답변

관련 문제