Comment ajouter une image d'arrière-plan en utilisant CSS qui ressemble à une bordure de chaque côté d'un div

Question

Fondamentalement, je veux créer une bordure personnalisée, en bas à gauche et à droite de mon contenu div. J'ai réussi à créer quelque chose qui fonctionne à moitié. Le problème que je reçois est d'aligner les divs pour qu'ils soient alignés sur le contenu div et ressemblent à des frontières plutôt qu'à des lignes flottantes. C'est difficile à expliquer alors s'il vous plaît voir l'image d'attaque de ce que je veux.

Vive

Je espère avoir fait quelque sence.

alt text http://www.webquark.co.uk/shadowed-borders.jpg

Answer 1

La technique de base est appelée 'fausses colonnes' et est expliquée dans le article with the same name. L'article explique comment utiliser "cover up" pour les barres latérales flottantes, mais c'est le même principe de base pour ce que vous voulez réaliser.

Answer 2

Vous devez créer un bitmap de hauteur large 1 pixel couvrant les 2 ombres portées, et le mettre en arrière-plan de votre div plus à l'extérieur (ou vous pouvez le mettre dans le corps). Centrez-le et réglez le background-repeat sur repeat-y.

Cette technique est utilisée sur this site par exemple. Il utilise css:

body { 
    background-attachment: scroll; 
    background-repeat: repeat-y; 
    background-position: 50% 0px; 
    background-color: #e8b36d; 
    background-image: url("images/bg_center_orange.gif"); 
} 

Answer 3

Créer un PNG aussi large que votre div wrap et le définir comme l'arrière-plan de l'emballage:

CSS:

div#wrap { 
    background: url('drop-shadow.png') repeat-y; 
    width: // the width of #wrap should be the same as the width of the background image 
} 

HTML:

<div id="wrap"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div> 

Vous aurez probablement besoin de marges ou de remplissage sur les divs internes afin que le contenu ne couvre pas vos ombres portées.