전체 화면 배경 이미지는

내가 내 고객 중 하나에 대한 전체 화면 배경 이미지를 만들었다 뻗어 있지만, 문제는 이미지를 만들 때 다음 CSS 코드를 사용하여 모든 화면에 맞게하는 것이 있습니다 :전체 화면 배경 이미지는

#bg-image img{ 
position:fixed; 
left:0; 
top:0; 
width:100%; 
max-height: 100%; 
} 
#bg-image{ 
height: 100%; 
width: 100%; 
float: left; 
overflow: hidden; 
position: relative; 
}

을

이미지가 내 홈페이지의 모든 배경을 채우고 있기 때문에 모든 것이 완벽하게 작동하지만 문제는 배경 이미지가 늘어난 것처럼 보입니다. 올바른 이미지 크기 또는 비율을 만드는 방법을 알고 싶습니다. (전체 품질로) 늘어나지 않고 전체 화면 크기에 맞추기 위해 배경 이미지가 완벽한 품질을 유지합니다.

내 홈페이지의 배경에 이미지가 완벽하게 맞춰 지도록하는 방법.

도움이 매우 감사 할 것입니다!

출처

2013-11-27 Hamza Abd Elwahab

은 몇 가지 좋은 옵션, IE8에서 작동 심지어 일부이. background-size는 훌륭하고 간단하지만 IE8은이를 지원하지 않습니다. 그것이 하나의 요소가 아니라면, 그것에 대해 걱정하지 마십시오. http://css-tricks.com/perfect-full-page-background-image/ –

고정 이미지를 사용하는 대신 background size 속성을 실제로 조사해야합니다. 배경 크기로 '표지'를 사용하면 이미지가 전체 배경을 덮을만큼 커야하거나 축소되어야 함을 의미합니다.

이미지의 크기를 아는 경우. 원래 크기를 초과하여 커지면 미디어 쿼리를 사용하여 배경 크기를 '자동'으로 변경할 수 있습니다.

html, body { 
    min-height: 100%; 
} 
body { 
    background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    background-size: cover; 
} 
@media (min-width: 1120px), (min-height: 630px) { 
    body { background-size: auto; } 
}

출처

2013-11-27 22:47:39

배경이 올바르게 나타나지만 문제는 이미지가 너무 늘어난 것처럼 보입니다. 고품질로 나타나고 전체에 적합하기를 바랍니다. 어떤 방식 으로든, 화면에 (스크롤없이) 어떤 방식으로, 그것은 매우 중요합니다. 나는 이것이 CSS 3를 사용하여 일어날 수 있는지 또는 풀 이미지로 나타나도록 이미지의 크기를 조정하여 할 수 있는지 알지 못합니다. –

이것은 확실히 이동하는 길입니다. 단지 IE8이'background-size'를 지원하지 않는다는 것을 잊지 마십시오. 따라서 사용자 중 일부는 추위에 빠뜨릴 수 있습니다. –

문제는 이미지가 여전히 내 사이트에서 펼쳐져 있다는 것입니다. 품질이 100 % 보일 것으로 기대합니다. 여기에서 볼 수 있습니다. http://leydenlewis.com/ –

하면이 같은 일을보십시오 :

#bg-image { 
position:fixed; 
left:-50%; 
top:-50%; 
width:200%; 
height: 200%; 
} 

#bg-image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
}

이뿐만 아니라 대부분의 브라우저에서 당신에게 당신이 원하는 결과와 일을 얻어야한다.

출처

2013-11-27 22:53:39

불행히도이 이미지는 위쪽과 아래쪽이 자르기 때문에 모든 이미지가 지금 나타나지는 않습니다. 내 이미지가 내 홈 페이지에 100 %로 표시되지만 전체 품질로 보일 경우 이미지가 늘어나고 싶지 않습니다. 내 사이트에 대한 링크입니다 http://leydenlewis.com/ –

이 링크 중 하나의 방법을 시도해보고 그 중 하나가 귀하에게 적합한 지 확인하십시오 : http://css-tricks.com/perfect-full-page-background -image/ –

@HamzaAbdElwahab 또한, 배경 이미지가 화면 비율에 관계없이 화면 크기에 관계없이 전체 화면을 채우게하려면 어떤 시점에서 이미지를 잘라야합니다. –

이 이미지를 정확한 비율을 유지해야한다 : 질문부터

#bg-image{ 
height: auto; 
width: auto; 
float: left; 
overflow: hidden; 
position: relative; 
}

출처

2013-11-28 14:57:04 guymid

<style> 
body { 
background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif); 
background-size: 320px 600px; 
background-repeat: no-repeat; 
padding-top: 40px; 
} 
</style>

출처

2014-06-12 13:23:08

코드를 설명하십시오. – Gwenc37

이 코드는 문제를 해결하는 데 도움이 될 수 있지만 코드 만 대답하면 품질이 좋지 않습니다. 더 좋은 대답은 코드가하는 일, 접근 방식의 이유, 코드가 삽입되는 위치 및 관련 문서에 대한 링크를 보여줍니다. –

구체적으로 CSS 만 (또는 NOT 자바 스크립트)를 명시하지 않는, 여기에 내가 밖으로 일했다 JQuery와 솔루션입니다 사용하고있다. 모바일 브라우저에 문제가있는 것으로 나타났습니다. 당신은 일반적으로 "하여 onResize"와 "온로드"에, 이미지 크기를 조정 할 때마다

//resize the background image 
function resizeImage($selection){ 
    //get the ratio of the image 
    var imageRatio = $selection.width()/$selection.height(); 

    //get the screen ratio 
    var screenRatio = $(window).width()/$(window).height(); 

    //if the image is wider than the screen 
    if(imageRatio > screenRatio){ 
     $selection.height($(window).height()); //set image height to screen height 
     $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio 
    } 

    //if the screen is wider than the image 
    else{ 
     $selection.width($(window).width()); //set the image width to the screen width 
     $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio 
    } 
}

실행 여기에

<body onresize="resizeImage($('#bgImage'))">

출처

2014-06-20 06:40:26 Adam

전체 화면 배경 이미지는

답변

관련 문제