그래디언트 위의 CSS 그래디언트 및 배경 이미지

Question

내 질문은 : 어떻게 내 2 가지 배경 이미지를 CSS 그래디언트 위에 오른쪽과 왼쪽으로 표시 할 수 있습니까? JA Elastica 템플릿 (기본 CSS 수정)을 사용하여 Joomla 웹 사이트에서 작업하고 있습니다.

그라디언트 위에 "background : url ('images')"라고 입력하면 현재의 CSS에 이미지가 표시되지만 그라데이션은 표시되지 않고 그래디언트 아래에 그라디언트가 표시됩니다. 이미지.

내가 현재 사용하고있는 코드는 이것이다 :

body#bd { 
background-image: linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%); 
background-image: -o-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%); 
background-image: -moz-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%); 
background-image: -webkit-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%); 
background-image: -ms-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%); 
background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0.02, rgb(142,210,46)), 
color-stop(0.51, rgb(171,252,74)), 
color-stop(0.76, rgb(206,255,104))); 
background: 
url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, 
url('https://dl.dropbox.com/u/6512758/onebeat.ro/left.png') no-repeat top left; 
} 

Answer 1

다 그렇지 않으면 이전 배경 문이 다음 중 하나에 의해 대체 될 것 같은 배경 이미지 속성에 있어야합니다. 더 많은 예제 여기

background-image: url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%); 

확인 : 예를 들어, 링크에 대한 How do I combine a background-image and CSS3 gradient on the same element?