Mettre une bande d'image sur le contour d'une page n'est pas encore possible en CSS. En tout cas en CSS2 que supporte les navigateurs actuels.
On peut cependant faire un petit bricolage pour arriver a se rapprocher de l'effet souhaité sans que cela soit lourd au niveau du code.
Une solution possible pourrait etre :
1. de définir le coeur comme background de l'élément html du document
2. définir des marges de 16 pixels pour que l'element body soit a 16 pixels (c'est la taille de ton image coeur) du bord de l'element html.
3. appliquer a l'element body un background-color blanc par exemple pour ne pas voir le background de coeur qui se trouve derriere.
ca donnerai ca rapidement :
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
- <head>
- <title>Test</title>
- <meta name="title" content="Test" />
- <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
- <meta http-equiv="Content-Language" content="fr" />
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- html {
- background-image: url(coeur.gif);
- }
- body {
- padding: 10px;
- background-color: pink;
- position: absolute;
- top: 16px;
- bottom: 16px;
- left: 16px;
- right: 16px;
- }
- </style>
- </head>
- <body>
- <h1>Test</h1>
- <p>
- Blabla Coincoin ...
- </p>
- </body>
- </html>
|
Ca c'est la maniere propre de le faire ... mais qui malheureusement est un a peu pres.
Pour que le resultat visuel soit exactement ce que tu attends tu vas devoir jouer avec des divs par exemple que tu palceras en absolute. Enfin je te laisse chercher : tu as encore le temps, la saint valentin est dans un mois 
Message édité par afbilou le 14-01-2008 à 18:53:57