2012-02-09 2 views
0

에 backimage 문제는 내가 ocean.png이이미지 및 HTML

body { 
background: url('ocean.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
background-size: 100%; 

    } 

그럼 내가 그 위에 다른 이미지를로드 할 전체 화면을 채우고있는 몸을 가지고있다.

<body> 
     <img src="image/bubble/bub0.png" name="bubble" width="100" height="100" alt="bub"> 

그러나 대신 이미지 bub0, 그것은 흰색 공간에서 왼쪽 상단의 바로 윗부분 전체 바다 배경 이미지에 다시 몸 이미지보다 더 높은 Z 나타나있다가 아래로 이동되었다. 나는 bub0 이미지를 바다 baackground 이미지에 superimpose하고 더 높은 z order를 원합니다.

+0

배경 이미지는 요소가 아닌 배경이므로 항상 맨 아래에 있습니다. 어쩌면 내가 원하는 걸 이해하지 못할 수도 있습니다. 예제 페이지가 있습니까? 아니면 어떤 스크린 샷이 있습니까? – Nathan

답변

3

당신은

img[name="bubble"] { 
    position : fixed; 
    top  : 0; 
    left  : 0; 
    z-index : 2; 
} 
+0

좋아, 거품 이미지를 맨 아래 가운데에 넣으면 어떨까요? – lilzz

+0

'top'과'left'px 값을 업데이트하십시오. – Maverick

1

배경 이미지는 상관없이 바닥에 항상 것뿐만 아니라 그것을 position: fixed;를 제공해야합니다. Z- 색인은이 문제와 아무 관련이 없습니다.

모든 브라우저에서 배경 크기 속성을 지원하지 않으므로 100 %까지 확장되지 않습니다. background-size 속성은 IE9 +, Firefox 4 이상, Opera, Chrome 및 Safari 5 이상에서 지원됩니다.

나는 이미지가 ocean.png이라고 생각하고 실제로 이미지가 낮아지고 백그라운드에 있지 않은 느낌을주는 전체 페이지를 다루지는 않는다고 생각합니다.