2012-05-07 21 views
0

CSS複数の背景位置決め

は私がページの中央にそれを配置し、水平方向に左から右にそれを繰り返すしたい別の画像を持っています。

http://www.tcs.com/homepage/Pages/default.aspx

任意のヒントや指示このウェブサイトに非常によく似ては高く評価されています。

は、それはあなたがあなたの元の背景画像を持っている場所によって異なり

答えて

0

ありがとうございます。それはこの

html { 
    background: url(original-background.png) top left repeat-x; 
    } 

ようなHTMLに貼り付けた場合、この

body { 
    background: url(repeating-background.png) top center repeat-x; 
    } 

は、あなたのCSSがあると私ができる方法として、いくつかのより詳細な情報を提供できるようにあなたは体に繰り返し水平画像を添付できあなたにもっと詳細な答えを与えますが、これはあなたが必要とするものに対してうまくいくはずです。

1

次のようなCSS3でmultiple background imagesを設定することができます。

body { 
    background: url(first_image.png) top left no-repeat, 
       url(second_image.png) center center repeat-x; 
} 

あなただけのカンマでルールを分離する必要があります。それはpretty widely supportedです。

これはあなたが探しているものですか?

http://jsfiddle.net/4S5HR/

2

私はこれを達成するためにラッパーを使用します。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
body { 
background-image: url(image1.jpg); 
} 
#wrapper { 
background-position: center middle; 
width:100%; 
height:100%; 
margin: 0px; 
padding: 0px; 
background-image: url(image2.jpg); 
background-repeat: x-repeat; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 

</div> 
</body>