CSS 배경은 300px에서 반복됩니다
-
12-09-2019 - |
문제
누구나 다음을 달성하는 방법을 알고 있는지 궁금합니다. http://www.dspts.si
화면의 첫 번째 1/3에는 빈 배경이 있으며 거기서부터 패턴 반복이 있어야합니다. 나는 매우 긴 패턴 PNG를 만들어 300과 repeat-x를 오프셋하도록 설정하여 지금 당장했습니다. 그러나이 솔루션은 페이지가 배경 이미지 PNG보다 길어지면 파손되기 때문에이 솔루션에 만족하지 않습니다.
제안 해주셔서 감사합니다!
해결책
반복 패턴을 배경으로 넣으십시오 html
요소, 그런 다음 흰색 1px * 300px 이미지는 배경 이미지로 body
요소, 그리고 당신은 모두 설정됩니다.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
당신은 사용할 필요가 없습니다 html
그리고 body
이를위한 태그이지만 가장 쉬운 방법이며 새로운 마크 업이 필요하지 않습니다.
다른 팁
여러 배경을 지정할 수 있습니다. 보다 CSS를 사용하여 여러 배경 이미지를 가질 수 있습니까?. 언급 된 기술은 다음과 같습니다.
- 전체 페이지를 다른 페이지에 넣으십시오
<div>
컨테이너 또는 오용<html>
그것에 대한 태그.
이것은 당신이 배경을 지정한다는 것을 의미합니다<body>
그리고 하나를 위해<html>
. - 여러 배경 이미지를 지원하는 CSS3을 사용하십시오. 모든 일반적인 브라우저에서는 아직 지원되지 않습니다.
제휴하지 않습니다 StackOverflow