La possibilité d'étirer l'image d'arrière-plan sur toute la largeur de la fenêtre du navigateur à l'aide de CSS n'est apparue qu'avec la sortie de sa dernière spécification - CSS3. Malheureusement, jusqu'à présent, un grand nombre d'internautes utilisent des navigateurs anciens qui ne comprennent pas la spécification CSS3. Par conséquent, vous devez faire un choix - soit utiliser une solution moins pratique, mais multi-navigateurs, soit une solution de haute technologie, mais destinée à un public limité. Considérons les deux options.
Nécessaire
Connaissances de base en HTML et CSS
Instructions
Étape 1
La première option est basée sur les spécifications antérieures du langage CSS. Vous devez créer une structure de code HTML comportant deux couches superposées, l'une au-dessus de l'autre. Les couches (div) peuvent être étirées à la largeur de l'écran dans l'ancienne spécification du langage de description de style en cascade. En bas des calques, vous devez placer l'image d'arrière-plan et en haut, tout le contenu de la page sera placé. Une telle structure dans le corps du document pourrait ressembler à ceci:
Ce sera le contenu de la page
Et la description des styles pour cette structure doit être placée dans la partie titre. Par exemple, ceci:
html, corps {
marge: 0px;
hauteur: 100 %;
}
#Contexte {
position: absolue;
largeur: 100 %;
hauteur: 100 %;
}
#corps {
position: absolue;
largeur: 100 %;
hauteur: 100 %;
indice z: 2;
}
Ici, les calques avec l'arrière-plan des ID (il s'agit de votre image d'arrière-plan) et le corps (il s'agit du calque du contenu de la page) sont définis sur un positionnement absolu et une largeur et une hauteur de 100 %. De plus, la couche de contenu se voit attribuer un numéro de série z-index = 2. Il détermine la "profondeur" des couches - plus elle est grande, plus cette couche est éloignée du "bas". Dans notre cas, ce sera au-dessus de la couche d'arrière-plan, qui utilise le z-index par défaut.
Étape 2
Le code complet pourrait ressembler à ceci:
html, corps {
marge: 0px;
hauteur: 100 %;
}
#Contexte {
position: absolue;
largeur: 100 %;
hauteur: 100 %;
}
#corps {
position: absolue;
largeur: 100 %;
hauteur: 100 %;
indice z: 2;
}
Ce sera le contenu de la page
N'oubliez pas de remplacer le nom du fichier d'image d'arrière-plan fon.png.
Étape 3
La deuxième option utilisera la propriété background-size introduite dans CSS3. Dans le même temps, ajoutez des propriétés similaires aux définitions de style précédemment utilisées par les navigateurs Mozilla Firefox, Google Chrome et Opera. Le bloc de description de style dans cette version peut ressembler à ceci:
html {
arrière-plan: url (fon.png) centre de centre de non-répétition fixe;
-webkit-background-size: couverture;
-moz-background-size: couverture;
-o-background-size: couverture;
taille de l'arrière-plan: couverture;
}
Et ici, n'oubliez pas de remplacer le nom du fichier d'image d'arrière-plan fon.png. Et dans le corps du document lui-même, aucune construction particulière n'est requise dans cette version.
