2012-07-24 2 views
1

나는이 사이트와 정확히 같은 배경에 두 개의 이미지 (오른쪽에 하나의 그림자 이미지, 다른 하나는 왼쪽에 있음)를 반복하려고합니다.여러 배경 이미지를 반복하려면 Y 왼쪽 및 Y 오른쪽

지금까지 내가 올바른 CSS 코드 얻을 수 없습니다입니다 :

http://www.elegantthemes.com/preview/Modest/

내가 그 사이트의 코드를 검토하고 내가 사용하고자하는 그림자 이미지를 가지고있다. 나는 우아한 테마가 Headway를 달리고있는 WordPress 사이트에서 사용하고있는 코드를 복사하려고 시도했다 :

.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; } 
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; } 

그러나 그것은 작동하지 않았다.

그때 나는 시도 :

body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;} 
이 오른쪽 그림자 이미지 일

- 그것은

다음

내가

body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;} 
이 왼쪽 그림자 이미지 일

을 시도 올바르게 표시 -가 나타납니다 올바르게

이제 코드를 결합하여 두 음영을 표시 할 때 Y를 따라 유동 이미지는 왼쪽과 Y 오른쪽과 같은 :

body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;} 

그것은 작동하지 않습니다 - 두 이미지가 나는 또한이 시도

을 표시하지 않습니다

body { 
    background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png); 
    background-repeat: repeat-y right top, repeat-y left top; 
} 

이 또한 작동하지 않습니다 - 두 이미지가 나타나지 않습니다.

우아한 테마로 겸손한 테마와 정확히 똑같이 작동 시키려면 어떻게해야합니까?

읽어 주셔서 감사합니다.

답변

0

해결책으로 Multiple Backgrounds을 사용할 수 있다고 생각합니다.

배경 속성은 multiple backgrounds in CSS3을 허용하도록 철저히 조사되었습니다.

body { 
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y, 
url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y; 
} 

CSS는 내가 당신을 도울 것입니다 희망 : - http://tinkerbin.com/Iw4yJ1H3

0

여기에 한 가지 방법은 당신이 그것을 할 수 있습니다. 배경을 그대로 사용하지 마십시오. div에 배경으로 이미지를 배치하거나 div로 이미지를 추가 할 수 있습니다. div를 사용하지 않고 div를 사용하지 않고도 이미지를 사용할 수도 있습니다. 도움이

http://jsfiddle.net/6UEXc/

희망.

관련 문제