Comment créer une boîte DIV extensible verticalement à partir de cette image?

Question

Je voudrais créer à partir de cette image une boîte DIV style pour mon site Web:

Comment puis-je faire en utilisant CSS et HTML.

je couper l'image en trois parties différentes:

• 

• 

• 

Cependant, je ne sais pas comment les utiliser avec Divs pour créer ma boîte verticalement consommable.

Merci pour votre aide!

Answer 1

Cela pourrait se faire avec des fonctionnalités CSS3 comme border-radius, box-shadow et dégradé. Voici un example. Devrait fonctionner dans Opera, Firefox, Chrome et Safari.

Aussi, vous pouvez le faire avec: avant et: après les pseudo-éléments CSS, comme dans les deux autres réponses.

Édition: Pour Internet Explorer toutes ces fonctionnalités sont possibles avec le fichier de comportement, comme PIE.

Answer 2

Essayez ceci: HTML:

<div class="container"> 
<div class="top"></div> 
<div class="middle">content here content here content here</div> 
<div class="bottom"></div> 
</div> 

CSS:

.container { width: 300px; } 
.top { padding-top: 15px; background: url(topimage.png); } 
.middle { background: url(middleimage.png); } 
.bottom { padding-bottom: 15px; background: url(bottomimage.png); } 

Adjust les rembourrages dans le CSS afin qu'ils correspondent à la hauteur de votre topimage et bottomimage, et la largeur du conteneur de telle sorte que il correspond aux largeurs de l'image.

Answer 3

Utilisez trois divisions séparées et réglez le rembourrage supérieur du milieu à la hauteur négative de la partie supérieure. Donc:

#top-div { 
    height: 25px; 
    background-image: url(bg-top.jpg); 
} 
#middle-div { 
    background-image: url(bg-middle.jpg); 
    padding-top: -25px; 
} 
#bottom-div { 
    background-image: url(bg-bottom.jpg); 
} 

Answer 4

Je suppose que vous voulez que votre contenu commence dans le premier, mais aussi dans le second. Si tel est le cas, vous aurez besoin d'un chevauchement sur les images d'arrière-plan.

HTML

<div class="expandable"> 
    <div class="content top">content goes here</div> 
    <div class="bottom"></div> 
</div> 

CSS

.expandable{ 
    background:url('middle-image.jpg') 0 0 repeat-x; 
} 
.top{ 
    background:url('top-image.jpg') 0 0 no-repeat; 
    height:auto!important; 
    height:100px;/* whatever the height of the top (big) area is */ 
    min-height:100px; /* whatever the height of the top (big) area is */ 
} 
.bottom{ 
    background:url('bottom-image.jpg') 0 0 no-repeat; 
    height:10px; /* whatever the height of the bottom image is. */ 
} 

Exemple à http://www.jsfiddle.net/gaby/s8XZQ/