배경 그래픽으로 웹 사이트에 시각적 흥미를 부여하십시오.
이미지는 매력적인 웹 사이트 디자인의 중요한 부분입니다. 여기에는 배경 이미지 사용이 포함됩니다. 콘텐츠 페이지의 일부로 제공되는 이미지와 달리 페이지 영역 뒤에 사용되는 이미지 및 그래픽입니다. 이러한 배경 이미지는 시각적 인 흥미를 페이지에 추가하고 페이지에서 찾고자하는 시각적 디자인을 얻을 수 있도록 도와줍니다.
배경 이미지로 작업을 시작한다면 의심의 여지없이 이미지를 페이지에 맞게 늘려야하는 상황에 부딪 힐 수 있습니다.
이는 광범위한 기기 및 화면 크기로 제공되는 반응 형 웹 사이트에 특히 해당 됩니다 .
배경 이미지를 늘리려는 욕망은 모든 이미지가 웹 사이트 공간에 적합하지 않기 때문에 웹 디자이너에게는 매우 일반적인 욕망입니다. 고정 크기를 설정하는 대신 이미지를 늘리면 브라우저 창이 얼마나 넓어 지거나 좁아도 페이지를 구부릴 수 있습니다.
페이지의 배경에 맞게 이미지를 늘리는 가장 좋은 방법은 background-size에 CSS3 속성을 사용하는 것입니다. 다음은 페이지 본문에 배경 이미지를 사용하고 크기를 100 %로 설정하여 화면에 항상 늘릴 수 있도록하는 예제입니다.
몸 {
배경 : url (bgimage.jpg) no-repeat;
background-size : 100 %;
}
caniuse.com에 따르면이 속성은 IE 9 이상, Firefox 4 이상, Opera 10.5 이상, Safari 5 이상, Chrome 10.5 이상 및 모든 주요 모바일 브라우저에서 작동합니다. 이 기능은 현재 사용 가능한 모든 최신 브라우저에서 사용할 수 있습니다. 즉,이 속성을 다른 사람의 화면에서는 사용할 수 없다는 두려움없이 사용해야합니다.
오래된 브라우저에서 뻗어있는 배경 보이기
IE9보다 오래된 브라우저는 지원할 필요가 거의 없지만 IE8이이 속성을 지원하지 않는다고 생각한다고 가정 해 봅시다. 이 경우에는 배경을 가짜로 만들 수 있습니다. 또한 Firefox 3.6 (-moz-background-size) 및 Opera 10.0 (-o-background-size)에 대한 브라우저 접두어 를 사용할 수 있습니다.
펼쳐진 배경 이미지를 가짜로 만드는 가장 쉬운 방법은 전체 페이지를 가로 질러 스트레치하는 것입니다. 그러면 여분의 공간이 생기지 않거나 텍스트가 늘어난 영역에 맞는지 걱정해야합니다. 방법은 다음과 같습니다.
id = "bg"/>
- 먼저 HTML BODY 요소에서 모든 브라우저의 높이가 100 %이고 여백이 0이고 패딩이 0이어야합니다. HTML 문서의 머리 부분에 다음을 추가하십시오.
- 배경이 될 이미지를 웹 페이지의 첫 번째 요소로 추가하고 id 에 "bg"를 지정합니다.
- 배경 이미지 가 위쪽과 왼쪽에 고정되고 높이가 100 %와 100 %가되도록 배경 이미지를 배치합니다. 스타일 시트에 다음을 추가하십시오.
img # bg {
위치 : 고정;
상단 : 0;
왼쪽 : 0;
너비 : 100 %;
높이 : 100 %;
} - id가 "content"인 DIV 요소 내부 페이지에 모든 내용을 추가하십시오. 이미지 아래에 DIV를 추가하십시오.
참고 : 이제 귀하의 페이지를 살펴 보는 것이 흥미 롭습니다. 이미지가 펼쳐지지만 내용은 완전히 사라져야합니다. 왜? 배경 이미지는 높이가 100 %이고 내용 분할이 문서 흐름의 이미지 뒤에 있으므로 대부분의 브라우저에서 이미지를 표시하지 않습니다.헤더, 단락 등을 포함한 모든 여기에있는 콘텐츠
- 상대적이며 Z- 인덱스 가 1이되도록 콘텐츠를 배치하십시오. 그러면 표준 준수 브라우저의 배경 이미지 위에 표시됩니다. 스타일 시트에 다음을 추가하십시오.
#content {
위치 : 상대적;
z- 색인 : 1;
}
- 하지만 너는 끝나지 않았다. Internet Explorer 6은 표준을 따르지 않고 여전히 문제가 있습니다. IE6를 제외한 모든 브라우저에서 CSS를 숨기는 방법은 여러 가지가 있지만 가장 쉬운 방법은 조건부 주석을 사용하는 것입니다. 스타일 시트 다음에 다음을 문서의 머리 부분에 넣으십시오.
- 강조 표시된 주석 안에 다른 스타일 시트를 추가하여 IE 6을 멋지게 만드십시오.
- IE 7과 IE 8에서 테스트해야합니다. 주석을 지원하기 위해 주석을 조정해야 할 수도 있습니다. 그러나, 그것을 테스트 할 때 작동했습니다.
OK - 이것은 과도하게 과도한 행동입니다. IE 7 또는 8을 더 이상 지원하지 않는 사이트는 거의 없으며 IE6은 훨씬 적습니다.
따라서이 접근법은 시대에 뒤쳐져 있으며 귀하에게 불필요한 것으로 보입니다. 나는 여기에 모든 호기심을 같이하기 전에 얼마나 어려운 일이 있었는지에 대한 호기심의 모델로 남겨 둡니다!
더 작은 공간에서 펼쳐진 배경 이미지 위조
비슷한 기술을 사용하여 웹 페이지의 DIV 또는 다른 요소에서 펼쳐진 배경 이미지를 가짜로 만들 수 있습니다. 절대 위치 지정을 사용하거나 페이지의 다른 부분에 이상한 간격을 두어야하기 때문에 약간 더 까다 롭습니다.
- 배경으로 사용하려는 페이지에 이미지를 배치하십시오.
- 스타일 시트에서 이미지의 폭과 높이를 설정하십시오. 높이, 너비에 백분율을 사용할 수는 있지만 높이에 대한 길이 값으로 조정하는 것이 더 쉽다는 것을 알았습니다.
img # bg {
너비 : 20em;
높이 : 30em;
} - 위에서와 같이 id가 "content"인 div에 콘텐츠를 배치하십시오.
여기에 귀하의 모든 콘텐츠
- 콘텐츠 div의 크기를 배경 이미지와 동일한 너비와 높이로 지정합니다.
div # content {
너비 : 20em;
높이 : 30em;
} - 그런 다음 콘텐츠를 이미지와 동일한 높이에 놓습니다. 그래서 이미지가 30em이라면 top 스타일을 갖습니다 : -30em; 콘텐츠에 Z- 색인 1을 넣는 것을 잊지 마십시오.
#content {
위치 : 상대적;
top : -30em;
z- 색인 : 1;
너비 : 20em;
높이 : 30em;
} - 그런 다음 위와 같이 IE 6 사용자에게 z-index -1을 추가하십시오.
다시 한번 말하지만, 배경 크기가 현재 광범위한 브라우저 지원을 즐기고있는 상황에서이 접근법은 불필요하며 과거 시대의 산물로 제시 될 가능성이 큽니다. 이 방법을 사용하기를 원한다면 최대한 많은 브라우저에서이를 테스트하십시오.
콘텐츠 크기가 변경되면 컨테이너 및 배경 이미지의 크기를 변경해야합니다. 그렇지 않으면 이상한 결과가 발생합니다.