如何在CSS中疊加圖像

Question

我需要弄清楚如何將我的徽標圖像疊加在另一個重複圖像的頂部，該圖像用作網站頂部的鑲邊條的背景。

的嘮叨吧圖像的CSS是這樣的：

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

有沒有辦法來添加在此之上另一幅圖像，並將它對準底層圖像的左側？

Answer 1

這樣的事情？

http://jsfiddle.net/aJEwZ/

<style> 
.nav { 
    background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x; 
    height: 250px; 
    width: 500px; 
    border:1px solid black; 
} 

img { 
    padding:20px; 
} 
</style> 

<div class='nav'> 
    <img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" /> 
    hello</div> 

Answer 2

在這裏你去。

這裏有一個DEMO

和這裏的CODE

這裏的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屬性與寫出來的圖像的兩個速記背景用逗號分隔。第一張圖片位於第二張圖片的頂部，依此類推。

屬性background-size的第一個屬性僅適用於背景屬性中的第一個屬性（聲明的背景屬性中的第一個圖像）。第二個屬性適用於背景屬性中的第二個圖像。

這與其他背景屬性（如background-repeat和background-image）具有相同的工作方式。

這裏是在具有多個背景圖像的文章：
http://www.css3.info/preview/multiple-backgrounds/