44 ans
Au pied de la Sainte Victoire (13)
693
Comment changer l’image de fond d’une template ?
Il existe en HTML (language CSS plus exactement, plusieurs fonctions permettant de gérer les images de fond.
- background-image : permet de spécifier une image d’arrière plan.
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
}
- background-color: permet de définir la couleur du fond (pratique en cas d’indisponibilité de l’image par exemple)
Ex:
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
}
Pour obtenir le code hexadecimal d’une couleur, rapportez vous au topic suivant
http://www.vivelesrondes.com/forum/viewtopic_20500.htm
- background-position: permet de gérer le positionnement de l'image et peut prendre différent paramètres. 1er paramètre : right ou center ou left (droite, milieu, gauche). 2ème paramètre : top ou center ou bottom (haut, milieu, bas)
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
}
- background-attachment: permet de fixer l'image de fond sur la page, le texte défile au dessus sans que l'image ne bouge
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
}
- background-repeat: permet de gérer le nombre de répétition de l’image dans la page.
no-repeat: une seule occurrence de l'image
repeat: l'image sera répété sur toute la page
repeat-x : l'image sera répété uniquement sur une ligne
repeat-y: l'image sera répété uniquement sur une colonne
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
background-repeat: no-repeat;
}
Astuce : pour pouvoir rapidement rajouter une image de fond séparé du texte (comme une bannière par exemple)
padding-top : permet de laisser une marge avant l'affichage du texte
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
background-repeat: no-repeat;
padding-top: 200px;
}
px = pixel.
L’idéal est de prévoir une hauteur légèrement supérieure à celle de l’image
Et voilà pour l'instant!
Il existe en HTML (language CSS plus exactement, plusieurs fonctions permettant de gérer les images de fond.
- background-image : permet de spécifier une image d’arrière plan.
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
}
- background-color: permet de définir la couleur du fond (pratique en cas d’indisponibilité de l’image par exemple)
Ex:
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
}
Pour obtenir le code hexadecimal d’une couleur, rapportez vous au topic suivant
http://www.vivelesrondes.com/forum/viewtopic_20500.htm
- background-position: permet de gérer le positionnement de l'image et peut prendre différent paramètres. 1er paramètre : right ou center ou left (droite, milieu, gauche). 2ème paramètre : top ou center ou bottom (haut, milieu, bas)
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
}
- background-attachment: permet de fixer l'image de fond sur la page, le texte défile au dessus sans que l'image ne bouge
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
}
- background-repeat: permet de gérer le nombre de répétition de l’image dans la page.
no-repeat: une seule occurrence de l'image
repeat: l'image sera répété sur toute la page
repeat-x : l'image sera répété uniquement sur une ligne
repeat-y: l'image sera répété uniquement sur une colonne
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
background-repeat: no-repeat;
}
Astuce : pour pouvoir rapidement rajouter une image de fond séparé du texte (comme une bannière par exemple)
padding-top : permet de laisser une marge avant l'affichage du texte
Ex :
td.leftside {
background-image: url(http://www.vivelesrondes.com/images/templates/fond.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed;
background-repeat: no-repeat;
padding-top: 200px;
}
px = pixel.
L’idéal est de prévoir une hauteur légèrement supérieure à celle de l’image
Et voilà pour l'instant!