Comment ajouter une image de fond en utilisant le CSS qui ressemble à une frontière de chaque côté d'un div

StackOverflow https://stackoverflow.com/questions/960493

  •  12-09-2019
  •  | 
  •  

Question

Basiquement Je veux créer une bordure personnalisée, sur le côté gauche et à droite de mon div contenu. J'ai réussi à créer quelque chose qui fonctionne à moitié. Le problème que je reçois ce aligner les divs afin que affleurent à la div de contenu et ressemblent à des frontières plutôt que des lignes flottantes. Il est difficile d'expliquer si s'il vous plaît voir l'image d'attaque de ce que je veux.

Vive

Je espère avoir fait quelque sence.

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

Était-ce utile?

La solution

La technique de base est appelée « colonnes faux », et est expliqué dans l'article avec le même nom . L'article porte sur la façon d'utiliser pour « couvrir » pour sidebars flottant, mais il est le même principe de base de ce que vous voulez atteindre.

Autres conseils

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). Centrer et réglez la background-repeat à repeat-y.

Cette technique est utilisée sur ce 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");
}

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

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 d'une certaine marge ou rembourrage sur les divs internes de telle sorte que le contenu ne couvre pas vos ombres portées.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top