2012-10-03 6 views
2

어떻게 해야할지 모르지만 왼쪽과 오른쪽으로 반복되는 반복되는 텍스처가 두 개 필요합니다.왼쪽에서 반복되는 텍스처와 오른쪽에서 반복되는 텍스처

#header { 
    background-image : Url('My_Two_Textures_Combined.png'); 
    background-repeat : repeat-x; /*Which repeats my joined textures a long the x axis*/ 
} 

내가 좋아하는 것 : 대신

#header { 
    background-image : Url('My_Left_Texture'); 
    background-repeat : repeat-x-left; /*Which would ideally repeat my texture to the left on the x axis*/ 
    background-image : Url('My_Right_Texture'); 
    background-repeat : repeat-x-Right; /*Which would ideally repeat my texture to the right on the x axis*/ 
} 

나는 내 웹 사이트에 좋은 보일 것 생각하기 때문에이 작업을 수행 할 수있는 방법이 있기를 바랍니다. 의사 명령이나 무엇인가와 같은 다른 방법을 찾아 볼 것입니다. 내가 무엇이라도 발견하면 나는 그것을 여기에서 게시 할 것이다!

답변

0

당신은 :before:after 같은 CSS 선택기를 사용 #header:before {}에 배경 중 하나 #header:after {} 하나를 배치 할 수 있습니다.

+0

한 다음 하나 개를 반복합니다 (이미지 배경 색을 대체) x,하지만 첫 번째 반복 후? 하지만 그때 나는 하나의 텍스처 만 가질 것입니다. 마지막으로 렌더링 된 것인가? – MithosAnnar

+1

당신은 적어도 Google에 호기심을 가지고 있습니까? : before 및 : after means? – Caelea

+0

그런 쉬운 질문을해서 미안합니다. – MithosAnnar

3

두 div의 머리글을 나란히 배치하십시오. 각각은 고유 한 질감이 있습니다.

+0

내가 정확히 생각한 것입니다 :). – Nicholas

+0

Downvote? 설명해주십시오 ... –

+0

+1. ': before'와': after'는 잘 작동하지만 2 div를 사용하는 단순함을 좋아합니다. –

6

: and : after는 좋은 해결책이지만, CSS3로 여러 배경을 항상 살펴볼 수 있습니다. 분명히, 지원도 조금 제한되어 있습니다 :> IE8, 그러나 이것도 트릭을 할 것입니다.

background-image: url(left.png), url(right.png); 
background-position: left bottom, right bottom; 
background-repeat: no-repeat; 
+0

CSS3를 잘 사용했습니다! 나는 CSS3가 여러 배경을 지원한다는 것을 몰랐다. 시원한. – BeetleTheNeato

+0

안녕하세요 Carl! 나는 그 소리가 좋아, 시도합니다 :) 건배! – MithosAnnar

+0

헤이 칼 너의 작품들도! 하지만 2 가지 질문을 올바르게 표시하려면 어떻게해야합니까? – MithosAnnar

0

당신은 이런 식으로 작업을 수행 할 수 있습니다 http://jsfiddle.net/9V2vE/9/는에 그래서입니다 무슨 뜻인지, 내가 하나 개를 반복 한 X를 가질 수

+0

도움을 주셔서 감사합니다. 저것은 바른 길에 명확히있다! 반복하기 만하면됩니다. – MithosAnnar

+0

원한다면 체크 박스를 누르십시오. p. 잘 "배경색"을 다음으로 대체해야합니다. background-image : url ("path/of/image/image.png"); background-repeat : repeat-x; // repeat-y; //반복; 내가 도와 드릴 수있어서 기쁩니다. :) – Nicholas