Toutela - Le site des Internautes

En HTML, une image en fond de page se répète obligatoirement sur toute la page.
Avec les feuilles de style, il est possible de contrôler la répétition, de 'nulle' à 'totale' en passant par 'horizontale ou verticale'. De plus, Internet Explorer permet de placer précisément l'image avec ou sans sa répétition.

Exemple :

Voir la démo

Le code :

Entre <HEAD> et </HEAD> :

<style>

Exemple 1
body.1 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: center; }

Exemple 2
body.2 { background-color: #FFFF00; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: center; }

Exemple 3
body.3 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: top; }

Exemple 4
body.4 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: bottom; }

Exemple 5
body.5 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-x; background-position: center; }

Exemple 6
body.6 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-x; background-position: left; }

Exemple 7
body.7 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-y; background-position: center; }

Exemple 8
body.8 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-y; background-position: top; }

Exemple 9
body.9 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: 25% 75%; }

Exemple 10
body.10 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: 100% 100%; }

Exemple 11
body.11 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: 20px 150px; }

Exemple 12
body.12 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; }
</style>

Entre <BODY> et </BODY> :

Newsletter

Toutela