CSS를 사용하여 배경 이미지의 크기를 조정하고 플로팅하는 방법은 무엇입니까?

저는이 사이트에서 일하고 있습니다 : http://www.problemio.com 그리고 제가 한 최고의 배너에 배경 이미지를 추가해야한다는 요구 사항이 있습니다.CSS를 사용하여 배경 이미지의 크기를 조정하고 플로팅하는 방법은 무엇입니까?

어떻게 해야할지 알 수없는 것은 오른쪽으로 끝까지 이동하고 길이를 줄여서 화면 너비의 절반 만 차지하는 방법입니다.

어떻게 할 수 있습니까? 지금까지 나는 전체 배너 DIV이 CSS를 가지고 :

.banner 
{ 
    width:60em; 
    margin: 0 auto; 
    position: relative; 
    padding: 0.3em 0; 
    z-index: 1; 
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png'); 
    background-repeat: no-repeat; 
    background-image: right-align 
}

을하지만 난 배경 이미지를 잘 정렬하고 사업부의 전체 폭의 50 %로 재조정하는 방법을 모르겠어요. 어떤 아이디어?

감사합니다.

출처

2011-10-03 Genadinik

CSS에 스케일링을 포함하지 않아도됩니다. 이미지가 특정 크기 일 필요가 있으면 크기로 만드십시오. – eaj

left, right, bottom, top 및 center을 배경 정렬에 사용할 수 있습니다. 또한 백분율.

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;

그러나 CSS2를 사용하지만 CSS3를 사용하여 이미지의 크기를 조정할 수는 없습니다.

background-size: <width> <height>;

더 사용 :

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;

가 바닥을 정렬하고 중심하려면 :

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;

출처

2011-10-03 18:22:00 MacMac

[괜찮은 브라우저 지원] (http://caniuse.com/background-size/)이있는 [CSS3의'background-size' 속성] (http://www.css3.info/preview/background-size/)을 사용하지 않는 한, img-opts). – sdleihssirhc

내 게시물을 CSS2로 업데이트하면 배경 이미지 크기가 조절되지 않지만 CSS3에서는 가능합니다. 건배! * 무언가 새로운 것을 오늘 배웠습니다. * – MacMac

그래도 여전히 이해가 안되는 점은 배너의 바로 오른쪽 부분이 단색의 회색이되고 배경 이미지가 확장되지 않는 것입니다. 왜 그런 일이 일어 났는지 알겠습니까? – Genadinik

사용 background-position: right; 및 background-size: [width] [height] (필요한 경우 값을 대체).

출처

2011-10-03 18:23:54

CSS를 사용하여 배경 이미지의 크기를 조정하고 플로팅하는 방법은 무엇입니까?

답변

관련 문제