Backgrounds

Headings

Uma imagem de background para um heading

h1 {
padding-left: 40px;
line-height: 36px;
background: url(images/h1.png) no-repeat left center;
}

Background numa div

Esta div tem três imagens de background: uma no topo, referente ao elemento h2; uma para o corpo, neste exemplo com a classe box; uotra para o bottom, neste caso com a classe last.

Div com imagem de background!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

/*A imagem bg.png é repetida ao longo do eixo Y, o que permite esticar consoante

 a altura do conteúdo*/

.box {
width: 424px;
background: url(images/bg.png) repeat-y;
}
/* Imagem de fundo para a parte superior da div*/

.box h2 {
background: url(images/bg-top.png) no-repeat left top;
padding-top: 20px;
}
/*Imagem de fundo para a parte inferior da div*/

.box .last {
background: url(images/bg-bottom.png) no-repeat left bottom;
padding-bottom: 20px;
}
/*padding*/

.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}

Background para imagens

Na versão css2, com css 3 já é possivel de realizar o mesmo sem imagens de fundo.

ar

.img-wrapper {
background: url(images/shadow.png) no-repeat bottom right;
clear: right;
float: left;
position: relative;/*IE*/
}

.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -5px 5px 5px -5px;
position: relative; /*IE*/
}

Background para pseudo selectors

Button 
a:link, a:visited {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/button.gif) no-repeat left top;
text-indent: 50px;
}
a:hover {
background: #369 url(images/button_over.gif) no-repeat left top;
color: #fff;
}

Selectores de atributos

Link externo

a[href^="http:"] {
background: url(images/arrow.png) no-repeat right top;
padding-right: 10px;
}


Mail


a[href^="mailto:"] {
background: url(images/email.png) no-repeat right top;
padding-right: 10px;
}

PDF

a[href$=".pdf"] {
background: url(images/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}

DOC

a[href$=".doc"] {
background: url(images/wordLink.gif) no-repeat right top;
padding-right: 10px;
}