2011-02-08 4 views
0

배경에 3 개의 이미지를 배치하는 데 문제가 있습니다. 즉, 위에 이미지가 하나 있는데, 실제로는 2000x550 픽셀이고 200px (세로)를두고 다른 이미지를 배치해야합니다. 그것도 모든 센터와 그들에게 바닥 글에 하나의 이미지를 커버.CSS 이미지 문제

이미지를 전체 이미지로 만드는 것이 더 좋다고 생각하십니까? 전체 약 30 킬로바이트. 아니면 CSS를 사용하여 그것을 배치하는 방법은 무엇입니까?

는 친절 감사

+1

이 게시물은 그래픽을 추가하면 훨씬 더 의미가 있다고 생각합니다. – eykanal

답변

0

CSS Z- 색인으로이를 수행 할 수 있어야합니다. 자세한 내용은 다음 링크를 참조하십시오 :

Z-인덱스의

W3C 학교 설명 : 스매싱 매거진에서 Z- 인덱스의의 http://www.w3schools.com/Css/pr_pos_z-index.asp

은 심도있는 설명 : http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

+0

답변 주셔서 감사합니다, 나는 Z - 인덱스 옵션에 대한 생각하지만 그것은 아니지만 작동, 내가 뭘하려고하는지이 이미지를 확인 http://www.idcreatief.nl/projects/Compactrijlessen/index2.html – andresmijares25

+0

div의 한 배경 이미지로 자동차, 녹색, 분홍색 및 회색 (컨테이너의 너비)을 가질 수 있으며 분홍색, 녹색 및 회색 소용돌이 모양의 배경 이미지가 추가로 있습니다 (html bg로 설정 - 색상 만 해당). , 이미지 없음), CSS 상단에 다른 모든 것을 배치합니다. – Dan

0

, 가장 좋은 방법은 지정된 높이와 div을 정의하는 것입니다 헤더 이미지를 배치하는 방법에 대한 질문에 대답하려면 (A 550 픽셀 높이 헤더는 나에게 굉장히 큰 것 같다,하지만 헤이의 귀하의 사이트)와 너비 (아마 100 %로 설정)를 사용하고 background-image CSS 속성을 사용하여 이미지를 배치하십시오. 이렇게하면 사이드 스크롤을 방지 할 수 있습니다.

+0

나는 그것이 내 친구를 끔찍한 알지만, 네가 말했듯이, 헤이 !! 그건 내 상사가 원하는 : (! 확인 URL을하고 u는 그것을 볼 수 있습니다 http://www.idcreatief.nl/projects/Compactrijlessen/ – andresmijares25

0

당신이가는 것을의 샘플 샘플 이미지와 함께 가면 좋을 것입니다. 귀하의 설명에서 z- 색인을 올바르게 구현하지 않은 것 같습니다. 내 생각 엔 z- 인덱스를 추가 할 div의 위치를 ​​선언해야한다는 것입니다. position : relative 인 경우에도 여전히 선언해야하거나 Z- 인덱스가 작동하지 않습니다.

- 실시간 답변에 대한 편집 -

이미지에보고 한 후이 어려운 구현하는 것이 사실이 아니다.

몸 {배경 : URL (이미지/녹색 - 핑크 gray_bg.png

  1. 설정 흰색과 녹색/분홍색/회색 배경에 BODY의 배경을 - 여기에 내가 어떻게 할 것입니다) 더 반복 #fff;}

  2. 는 회색 이미지에 DIV의 배경 설정하십시오 -

    DIV 번호 회색 {배경 : URL (이미지/gray_bg.png) 노 반복 #fff을}

회색 배경의 div가 이미 페이지의 BODY의 "맨 위에"있기 때문에 Z- 색인을 설정할 필요가 없습니다. 투명한 배경을 가진 PNG 이미지를 사용하면 흰색 배경이 배경 이미지 중 하나에서 다루어지지 않는 곳 어디에서나 볼 수 있습니다.