Sur son post, Dmitry s’étais lancé le challenge de trouver une technique pour faire une boite arrondie avec une seule image de fond.
Il a trouvé une solution qui marche mais qui a le défaut de limiter la hauteur de la boite à la hauteur de l’image. Cela demande donc la création d’une image très haute (1000px), ce qui charge en poids inutilement la page et n’est pas très propre.
C’est plus bas, dans les commentaires de l’article que la réponse ultime arrive, postée par un certain Sebastian Steinmann. La solution n’est toujours pas étirable en largeur mais est plus propre et plus pratique à utiliser que les éternelles découpes.
L’idée c’est d’arriver à ce résultat :
L’image fait un peu penser au texturing pour la 3D. On a donc le header en haut à gauche, le footer en bas à gauche et à droite on a le content à répéter sur toute la hauteur de la boite :
On commence par poser le html qui suit :
<div class="contentbox">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>Ensuite on joue sur l’alignement droite/gauche haut/bas de l’image en background dans les CSS pour afficher une partie puis une autre de l’image en background :
.contentbox {
width: 300px;
background: url(background.png) no-repeat left bottom;
padding-bottom: 17px;
margin: 0 auto;
}
.contentbox h2 {
height: 24px;
width: 270px;
background: url(background.png) no-repeat left top;
padding: 5px 15px;
font-size: 16px;
color: #fff;
}
.contentbox p {
width: 268px;
background: url(background.png) repeat-y right top;
padding: 10px 16px 0 16px;
}Voir en ligne le résultat : http://sebs.ng5.as/files/content2.html
Répondre à cet article
Suivre les commentaires :
| 