배경 이미지 위에 배치 된 콘텐츠

배경 이미지의 특정 요소를 기반으로 콘텐츠를 배치하려고합니다. 나는 많은 연구를했으며 JavaScript를 통해 가능할 수도 있지만 JavaScript의 기능에 익숙하지 않습니다. 나는 그 정보가 이미지에 4 개 박스 내에서 유지하기 위해 노력하고있어 http://dl.dropbox.com/u/4650892/bg2.jpg 배경 이미지 위에 배치 된 콘텐츠

여기 내가 사용하고 배경 이미지입니다. 이 순간 내가 완벽하게 브라우저 내에서 크기로 유지 배경 이미지를 보장하기 위해 다음과 같은 CSS를 활용 한 :이 코드는 내가 달성하기 위해 노력하고있어 필수적하지 않을 수 있습니다

background-image: url('../images/bg2.jpg'); <br /> 
background-repeat:no-repeat; <br /> 
background-position:center center; <br /> 
background-attachment:fixed; <br /> 
-o-background-size: 100% 100%, auto; <br /> 
-moz-background-size: 100% 100%, auto; <br /> 
-webkit-background-size: 100% 100%, auto; <br /> 
background-size: 100% 100%, auto;

, 난 완전히 확실하지 않다 .

콘텐츠를 한 해상도로 유지하면 콘텐츠를 배치하기가 쉽지만 브라우저의 크기가 조정되면 콘텐츠가 이미지와 일치하지 않게 이동합니다.

모든 도움을 주시면 대단히 감사하겠습니다.

출처

2012-08-23 user1601995

콘텐츠를 어떻게 배치하고 있습니까? 이것이 본질적인 문제입니다. 이미지와 항상 같은 왼쪽 위 위치를 갖도록 이미지 (위치 : 상대)에 상대적으로 지정합니다. –

버팔로 이미지 및 그 이미지의 다른 요소를 분리 할 수 없습니까? 아니면 그 모두가 배경 이미지의 일부가되어야합니까?

나라면 나만 버팔로 그림을 배경 이미지로 만들 것입니다. HTML에서 다른 요소를 만들 것입니다. 미디어 쿼리를 기반으로해야하는 경우 크기를 변경할 수 있습니다.

출처

2012-08-23 00:47:37

지금 당장 감사 드리겠습니다. 감사합니다. – user1601995

왜 내가 처음에 이것을하지 않았는지 전혀 알지 못합니다. 거대한 정신의 여백. 감사합니다 제프 – user1601995

슈퍼 duper 오신 것을 환영합니다! –

전체 UI를 하나의 전체 이미지에 배치 한 다음 텍스트를 적용하면 가장 큰 슬픔을 느끼게 될 것입니다.

동물을 배경 이미지의 유일한 요소로 사용하는 것이 좋습니다. 그런 다음 로고와 같은 다른 HTML 요소를 추가 한 다음 네 개의 상자를 다른 모든 요소 아래에 다시 추가 할 수 있습니다. .

CSS를 사용하여 기본 그래픽 (예 : 로고 및 "곧 출시 예정"텍스트)이 중앙에 배치되도록하는 방법으로 CSS를 사용하여 고정 비율로 상자의 크기를 조정할 수 있습니다. 브라우저 해상도.

출처

2012-08-23 00:46:19

배경 이미지 위에 배치 된 콘텐츠

답변

관련 문제