두 개의 배경 이미지를 얻는 방법. 하나는 상단 배너이고 두 번째는 질감 된 배경입니까?

Question

나는 웹 사이트에서 일하기 시작했습니다. 두 가지 배경 이미지를 갖고 싶습니다. 하나는 스택 오버 플로우의 웹 사이트 상단에있는 회색 스트립과 비슷한 상단의 배너 이미지입니다. 그러면 다른 이미지는 질감 된 배경을 만들어야하는 이미지입니다. 이것은이 웹 사이트의 공백과 같지만 색상 대신 반복적 인 이미지가됩니다. 내가 갈 모양의 웹 사이트는 pinterest.com, subtlepatterns.com, Facebook.com 등입니다 ...

나는 많은 다른 것들을 시도했습니다. CSS의 html 태그에 배경을 두어 보았습니다. 그것은 작동하지 않았다. 또한 body 태그에 두 개의 다른 배경 이미지를 넣으려고했습니다. 그것은 첫 번째 것을 보여주기 때문에 작동하지 않았습니다. 나는 또한 자신의 클래스에 배경 만들기를 시도했다. 그러나 내가 그렇게했을 때 그것은 전혀 나타나지 않을 것입니다. 어쩌면 내가 HTML에서 뭔가를 버렸을 까? 이것은 내가가 원하는처럼 전체 화면을 차지 메인 배경 이미지를 만들었습니다

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { 
margin: 0; 
padding: 0; 
background-image:url(../images/absurdidad.png); 
background-repeat:repeat; 
} 

:

현재 나는 다음과 같은 코드를 가지고있다. 두 번째 것을 상단에 추가하면 수평으로 만 반복 할 수 있는지 알면 좋을 것입니다.

도움을 미리 감사드립니다.

Answer 1

이것은 당신이 Can I have multiple background images using CSS?

당신은 그것을 얻 여러 배경 또는 일부 태그 속임수를 제공하기 위해 CSS3를 사용할 수 있습니다 도움이 될 것입니다.

Answer 2

내가 알고있는 유일한 방법은 관련된 래퍼 태그를 여러 개 갖는 것입니다. 예를 들면 다음과 같습니다.

<div style="background-image:url(../images/image1.png);"> 
    <div style="background-image:url(../images/image2.png);"> 
     <!-- div content --> 
    </div> 
</div> 

Answer 3

크기 및 위치 조정할 수 있습니다. 여기 이미지 2가 반복됩니다. 다른 스타일을 신청

background-image: url('first'), url('second'); 

과 같은 규칙 : 등등

background-position: top, bottom; 

와 쉼표를 사용하여

background:url(image1.jpg),url(image2.jpg); 
background-size:80px 60px; 
-moz-background-size:80px 60px; /* Firefox 3.6 */ 
background-repeat:no-repeat,repeat; 
background-position:top left,center center; 

Answer 4

, 당신은 여러 개의 같은 요소에 배경을 가질 수 있습니다.

<div class="one"> 
    <div class="two"> 
    </div> 
</div> 

행운을 빕니다 :

당신이 광범위한 브라우저 지원을 원하는 경우 css3.info

@

더 많은 정보는, 여러 된 DIV 그것을 할 수있는 유일한 방법입니다!

Answer 5

여기 난 그냥 만든 jsFiddle입니다 : jsFiddle Banner and Repeatable Background

CSS :

body{ 
    background-image:url("http://silviahartmann.com/background-tile-art/images/grunge-background-seamless-repeating.jpg"); 
    background-repeat: repeat; 
    color: white; 
} 

#headerBackground{ 
    position: fixed; 
    width: 100%; 
    height: 50px; 
    background-color: gray; 
} 

#headerContent { 
    background-image: url(http://lorempixel.com/700/50/city/5); 
    background-position: center center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 

HTML :

<div id="headerBackground"> 
    <div id="headerContent">Other Header Content</div> 
</div> 

업데이트 : Hotlinkable 반복 배경 이미지 개정 jsFiddle.