CSS 배경 이미지 정렬 문제

내 배경 이미지가이 코드의 div 사이에서 정렬되지 않습니다. 사용하지 않으려 고 시도했습니다. 누구나 원인을 알 수 있습니까? 또는 어떻게 작동시킬 수 있습니까? 편의를 위해 html로 된 CSS. 여기 CSS 배경 이미지 정렬 문제

<div class="header" style="height:200px; background-image: url(bg.png); margin:-8px;"> 
<img src="logo.png" style="margin-left:auto; margin-right:auto;" /> 
</div> 

<div style="text-align:center;"> 
    <div style="background-image: url(bg.png);background-position:center; 
display:inline-block; width:90px; border-bottom-left-radius: 20px;">Div 1</div> 
    <div style="background-image: url(bg.png);background-position:center; 
display:inline-block; width:400px;margin:-4px;">Div 2</div> 
    <div style="background-image: url(bg.png);background-position:center; 
display:inline-block; width:90px;border-bottom-right-radius: 20px;">Div 3</div> 
</div>

은 바이올린의 : http://jsfiddle.net/FphKk/

이미지 : http://i.imgur.com/YLVpI.png

내가 어떤 배경 이미지를 볼 수는 없지만, 지금까지 내가 말할 수있는, 2 <div>이 1 일 사이에 일치하지 않을

출처

2012-10-05 Anonymous

귀하의 마진은 스트라이프 정렬 불량의 원인이되므로 자신의 배경을 div의 이동하고있다 width - 그렇지 않으면 줄무늬가 창 너비에 따라 정렬되지 않습니다.

Fiddle here

출처

2012-10-05 03:10:13 Scott

오, 좋은 분. 건배 스캇! –

그러나이 모든 것을 어떻게 페이지 중앙에 정렬 할 수 있습니까? 헤더 div를 전체 페이지 (100 %)로 확장하려면 어떻게해야합니까? 미안해, 내가 바뀌는 것이 무엇이든 다른 것을 깨뜨리는 것은 매우 까다 롭다. –

전체적인 디자인은 매우 "hinky"합니다. 하나의 배경 이미지로 두 개의 하단 모서리를 둥글게하는 것이 좋습니다. 이렇게 : http://jsfiddle.net/NotInUse/FphKk/6/하지만 처음에 왜 당신이했던 것처럼 물건을 만들 었는지 모른 채, 내가 재구성하지 않고 코드를 조정하고있었습니다. – Scott

그리고 대신 display:inline-block;을 사용했기 때문에 세 번째 <div>이 발생했습니다.

http://jsfiddle.net/bcnobel/FphKk/1/

하면 이미지의 전체 URL을 설정하지 않았기 때문에 솔직히,이 배경 이미지의 위치로 무엇을 말할 수 없다.
나는 당신이 URL을 바꾸 자마자 그것을 조사 할 것이다.

여백 : Fiddle here

인라인 블록을 다시 추가하고 세트로 컨테이너 사업부를 만들 수있을뿐만 여백을 제거

출처

2012-10-05 02:42:01

이미지는 http://i.imgur.com/YLVpI.png –

확인에있다, 그래서 배경 이미지에 추가 (내가 그 더 명확 생각 만하기 때문에 HTML과 CSS를 분리 방법). 또한'logo.png'에 대한 전체 URL이 있습니까? 이것이 원하는 것입니까? http://jsfiddle.net/bcnobel/FphKk/2/ –

아니요. 배경의 줄무늬가 여전히 div 1, 2 및 3에서 잘못 정렬되어있는 것을 보시겠습니까? 어떻게 든 그들을 정렬해야합니다. –

CSS 배경 이미지 정렬 문제

답변

관련 문제