web-dev-qa-db-ja.com

CSSを使用して複数の背景画像を作成できますか？

背景画像を2つ持つことは可能ですか？例えば、ある画像を上から横に繰り返し（repeat-x）、別の画像をページ全体に繰り返し（repeat）、ページ全体に1つの画像を上に繰り返し表示する画像の後ろに配置するとします。

Htmlとbodyの背景を設定することで、2つの背景画像に望ましい効果を達成できることがわかりました。

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

これは「良い」CSSですか。もっと良い方法はありますか？ 3枚以上の背景画像が必要な場合はどうすればよいですか。

cssbackground-image
310
Rudd Zwolinski

CSS3はこのようなことを許していて、それはこのように見えます：

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

すべての主要ブラウザの現在のバージョンでは現在サポートされています 。ただし、IE8以下をサポートする必要がある場合は、回避策があります。追加のdivを持つには

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
375
nickf

1つのdivに2つの異なる背景画像を使用することが最も簡単な方法は、次のコード行を使用することです。

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

明らかに、それはウェブサイトの本体だけのためである必要はなく、あなたはあなたが望むどんなdivのためにでもそれを使うことができます。

それが役立つことを願っています！誰かがさらなる指示や助けを必要とするならば、これについてもう少し深く話している私のブログの投稿があります - http://blog.thelibzter.com/css-tricks-use-two -background-images-one-div 。

33
TheLibzter

これを使って

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

background-positionですべての画像の位置を調整し、background-repeatでrepeatプロパティを設定する簡単な方法：すべての画像に対して個別に

23
code.rider

現在のバージョンのFFとIEおよびその他のブラウザは、単一のCSS2宣言で複数の背景画像をサポートしています。こちら http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ そしてこちら http ：//www.quirksmode.org/css/multiple_backgrounds.html そしてここ http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

IEの場合は、動作を追加することを検討してください。ここを見てください： http://css3pie.com/

13
Shannon

はい、それは可能で、人気のあるユーザビリティテストWebサイト Silverback によって実装されています。ソースコードを見ると、背景が複数の画像で構成されていて、それらが重なって配置されていることがわかります。

これがどうやって効果を発揮するかを実演した記事です ビタミン 。これらの「タマネギの皮」の層を包むための同様の概念は A List Apart にあります。

4
Mike B

複数の背景画像を使いたいが、それらを重ね合わせたくない場合は、次のCSSを使用できます。

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

このHTML構造では：

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
4
rachel
#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

CSS3を使えば簡単に複数の画像を追加できます。ここで詳細に読むことができます http://www.w3schools.com/css/css3_backgrounds.asp

2
Rinku

背景にメインのページに別の背景を持つトップのdivを持ち、それらの間でページのコンテンツを区切るか、コンテンツを別のzレベルのフローティングdivに入れることができます。あなたがしている方法はうまくいくかもしれませんが、私はそれがあなたが遭遇するすべてのブラウザでうまくいくかどうか疑います。

1
Sean James