Mettre un fond image sous votre titre
 |
 |
 |
 |
 |
 |
Partie "Haut"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Image de fond | background-image | Adresse d'une image (clic droit>propriétés sur une image) | |
| Répetition de l'image de fond | background-repeat | Dépend de l'image de fond | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge intérieure haute | padding-top | Dimension (ex: 10px) | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
CSS de cette règle :
#haut
{
background : #EBEDAB; /* couleur du fond modifiée */
background-image : url(http://www.blog4ever.com/artimages/490070915021529.gif);
background-repeat : repeat;
height : 80px; /* hauteur agrandie pour contenir le titre */
padding-top : 5px;
border-width : 4px; /* taille bordure augmentée */
border-style : double; /* style bordure modifié */
border-color : #00FF00; /* couleur bordure modifiée */
text-align : center;
background-attachment : fixed;
}
Partie "Haut > Titre"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur du texte | color | Choisir | |
| Décoration du texte | text-decoration | ||
| Taille de la police | font-size | ex: 10pt | |
| Famille de la police | font-family | ex: Arial, Verdana, Trebuchet MS |
CSS de cette régle :
#haut h1 a
{
color : #00CC00; /* attribut ajouté */
text-decoration : none;
font-size : 40pt; /* taille des caractères augmentée */
font-family : Comic sans Ms;
}
J'ai utilisé une image classique de fond, dans Blog4ever il y a des artistes en peinture ou photo, je suis certain qu'il y aura de belles compositions, indiquez-moi votre blog en commentaire ainsi vous servirez d'exemples pour les blog4everistes.
Astuces
Sur chaque page de votre blog vous pouvez mettre une image différentes, pour les spécialistes photos, un panoramique en rapport avec le sujet traité dans la page.
Pour réaliser cette opération il faut, comme moi sur cette page, dans chaque page rentrer dans le composeur en mode HTML, le code suivant avec l'adresse de votre image :
Uniquement l'attribut de l'image
<STYLE type=text/css>
#haut { background-image : url(http:// adresse de votre image); }
</style>
#haut { background-image : url(http:// adresse de votre image); }
</style>
ou les 2 règles comme ci-dessous, si vous souhaiter changer d'autres attributs.
<STYLE type=text/css>
#haut
{
background : #EBEDAB;
background-image : url(http:// adresse de votre image);
background-repeat : repeat;
height : 80px;
#haut
{
background : #EBEDAB;
background-image : url(http:// adresse de votre image);
background-repeat : repeat;
height : 80px;
padding-top : 5px;
border-width : 4px;
border-style : double;
border-color : #00FF00;
text-align : center;
background-attachment : fixed;
}
#haut h1 a
{
color : #00CC00;
text-decoration : none;
font-size : 40pt;
font-family : Comic sans Ms;
}
</STYLE>
border-width : 4px;
border-style : double;
border-color : #00FF00;
text-align : center;
background-attachment : fixed;
}
#haut h1 a
{
color : #00CC00;
text-decoration : none;
font-size : 40pt;
font-family : Comic sans Ms;
}
</STYLE>
