CSS : 배경 이미지와 관련된 이미지 위치 지정

x- 반복 배경이있는 사이트에 로고와 메뉴를 배치하고 싶습니다.이 두 가지를 배경의 같은 영역에 항상 표시하고 싶습니다. 배경에 밝은 스트라이프가 있고 로고는 항상 그 안에 있어야하며 메뉴 항목은 그 아래에 있어야합니다.CSS : 배경 이미지와 관련된 이미지 위치 지정

로고 및 메뉴 이미지가 화면 크기에 따라 축척되고 배경이 반복 될 때 나는 y 축에서 작동하도록 할 수 없습니다.

페이지는 sarahreesbrennan-fans (dot) com입니다. 당신이 한 번 보시면 제가 무슨 뜻인지 알게 될 것입니다. (누군가가 설명에서 그것을 상상할 수없는 경우에 대비하여 내가 말하는 것을보고있는 것입니다.) 페이지에 대한

내 코드는 다음과 같습니다

<div id="bg_wrapper"><img src="/wp-content/uploads/2013/08/floral.png" /></div> 
<div id="logo"><img src="/wp-content/uploads/2013/08/logo1.png" width="50%" /></div>

그리고 CSS :

body { 
color: #444444; 
font-family: verdana, sans-serif; 
font-size: 10pt; 
background: url(/wp-content/uploads/2013/08/page-back.gif) repeat-x #22221f; 
} 
#bg_wrapper { 
position:absolute; 
z-index:-1; 
width:100%; 
text-align:center 
} 
#logo { 
padding-top: 3%; 
padding-left: 3%; 
}

고마워요!

출처

2013-08-15 RavenNights

새 것 같은데, 당신은해야 게시물을 편집하고 코드 시도 및 가능한 경우 jsFiddle을 배치하십시오. – Shivam

다음을 읽어주십시오. http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to- 그것 –

@ Shivam : 합의 –

div의 오른쪽 높이를 만들고 div의 이미지를 가운데로 정렬하는 것이 트릭입니다.

#logo { 
    padding-top: 0; 
    padding-left: 3%; 
    height:128px; line-height:128px; 
} 
#logo img {vertical-align:middle;}

이 부분은 Fiddle입니다.

(주이도 표시 수평 스크롤을 유발하는 효과를 가지고 같은 창이 넓은 충분했다 때 나는 또한 #bg_wrapper에서 width:100%을 제거 바이올린 인치)

출처

2013-08-15 20:05:00

대단히 감사합니다! 나는 이것을 시도해 보았고 그 접근법은 꼭 필요한 것이지만 img는 수직 정렬에 반응하지 않을 것입니다. – RavenNights

추신 : 너비가없는 경우 : 100 %, 꽃 무늬가 가운데에 배치되지 않습니다 ... 이제 스크롤 막대가 사라지도록 99 %로 설정했지만 더 나은 해결책이 있다면 듣기 좋다. 고마워! – RavenNights

img가 수직 정렬에 응답하지 않습니까? 그거 이상 하네; 그것은 내 컴퓨터에서 않습니다 : 내가 그것을 제거하면 이미지가 위쪽으로 점프. 질문에 언급 한 것과 다른 요소가이 요소에 정의되어 있습니까? –

CSS : 배경 이미지와 관련된 이미지 위치 지정

답변

관련 문제