css - CSSで画像を重ねる方法

Question

サイトの上部にあるナグ バーの背景として使用されている別の繰り返し画像の上にロゴの画像を重ねる方法を理解する必要があります。

ナグバー画像の CSS は次のようになります。

.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;

この上に別の画像を追加して、下にある画像の左側に配置する方法はありますか?

Answer 1

どうぞ。

ここにデモがあります

ここにコードがあります

ここにCSSがあります

.header {
    background:  url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
    background-size: 571px 125px, auto;
    height:125px;
    width: 100%;
}

background 属性には、コンマで区切られたイメージが書き出された 2 つの省略形の背景があることに注意してください。最初の画像は 2 番目の画像の上に表示されます。

属性 background-size の最初のプロパティは、background 属性の最初のプロパティ (宣言された background 属性の最初の画像) にのみ適用されます。2 番目は、background 属性の 2 番目の画像に適用されます。

これは、background-repeat や background-image などの他の background-properties と同じように機能します。

複数の背景画像を持つことに関する記事は次のとおりです:
http://www.css3.info/preview/multiple-backgrounds/