CSS 배경은 300px에서 반복됩니다

StackOverflow https://stackoverflow.com/questions/1845714

  •  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을 사용하십시오. 모든 일반적인 브라우저에서는 아직 지원되지 않습니다.

예, 배경 이미지를 정상적으로 지정하지만 background-position 이와 같이:

background-position:0 300px;

이렇게하면 배경 이미지가 왼쪽에서 0px에서 시작되고 상단에서 300px가 시작됩니다.

사용할 수 있다는 것을 잊지 마십시오 개똥 벌레 ~와 함께 Firefox 웹 사이트에서 기술을 쉽게 진단합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top