Installation d'un fond de page "Image"
En noir sur l'image
Les tableaux du DizPerso, ci-dessous, contiennent tous les attributs utilisés pour créer une page avec un effet de transparence, ce qui permet de voir au maximun l'image de fond de page.
Si toutefois, certains attributs ne sont pas présents dans votre assistant, en dessous de chaque tableau, vous trouverez le CSS correspondant que vous pouvez copier et coller dans la feuille de style en ouvrant le deuxième onglet "Modification directe du CSS".
Si toutefois, certains attributs ne sont pas présents dans votre assistant, en dessous de chaque tableau, vous trouverez le CSS correspondant que vous pouvez copier et coller dans la feuille de style en ouvrant le deuxième onglet "Modification directe du CSS".
Vous trouverez un diaporama de quelques photos pour fondn de page. Suivez ce [lien]
Partie "Page"
| 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 |
Code CSS de cette partie
body
{
background : #FFFFFF;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080616042614.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
}
{
background : #FFFFFF;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080616042614.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
}
Le fond de la partie "Cadre" doit être rendu transparent car il recouvre pratiquement totalement la page, pour un autre exemple je mettrai l'image dans le cadre.
Pour mettre le fond transparent, background mettre comme valeur le "#" et pour l'image à la place d'une adresse background-image mettre comme valeur "http://". De cette façon l'attribut reste présent dans l'assistant mais avec une valeur nulle.
Pour mettre le fond transparent, background mettre comme valeur le "#" et pour l'image à la place d'une adresse background-image mettre comme valeur "http://". De cette façon l'attribut reste présent dans l'assistant mais avec une valeur nulle.
Partie "Cadre"
| 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 |
Code CSS de cette partie
#cadre
{
background : #;
background-image : url(http://);
background-repeat:repeat;
background-attachment:fixed;
border : 0px solid #000000;
}
{
background : #;
background-image : url(http://);
background-repeat:repeat;
background-attachment:fixed;
border : 0px solid #000000;
}
Dans la partie "Contenu", il en est de même, mettre " # " comme valeur de la couleur de fond et "http://" pour image de fond. En plus j'indique la solution pour les bordures, si dans l'une des parties vous avez comme ci-dessous les 3 lignes, mettez la taille à "0px". Si ces attributs sont dans le fichier CSS, sous la forme suivante : "border: 1px solid #000000" mettez également "0px".
Dans cette version avec photo, parfois la lisibilité est moins bonne donc déjà dans un premier temps, il faut changer la couleur du texte, j'ai rajouté l'attribut "color". Mais il y a mieux à faire, une astuce arrangera ce petit inconvénient dans de nombreux cas, voir en bas de cet article [lien]
Dans cette version avec photo, parfois la lisibilité est moins bonne donc déjà dans un premier temps, il faut changer la couleur du texte, j'ai rajouté l'attribut "color". Mais il y a mieux à faire, une astuce arrangera ce petit inconvénient dans de nombreux cas, voir en bas de cet article [lien]
Partie "Contenu"
| 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 | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir | |
| Couleur du texte | color | Choisir |
Code CSS de cette partie
#contenu
{
background : #;
background-image : http://;
background-repeat:repeat;
background-attachment:fixed;
border-width : 0px;
border-style : solid;
border-color : #009933;
color: #000066;}
{
background : #;
background-image : http://;
background-repeat:repeat;
background-attachment:fixed;
border-width : 0px;
border-style : solid;
border-color : #009933;
color: #000066;}
Sur cette page la partie "Menu" n'est pas traitée pour la transparence, un autre article suivra à ce sujet.
Astuces...
- 1 - Comment insérer du code CSS dans une page...
Première solution
Chaque balise peut avoir son style, en insérant le CSS de cette façon :
<div style ="background : #; background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080618030622.gif); background-repeat:repeat; padding: 10px 5px 10px 5px; border : 1px solid #000000; color : #000066"> votre texte bla bla bla... </div>
Deuxième solution
Pour toutes les balises DIV du "Contenu" de la page :
Mettre ce code au début de la page, en mode HTML, après le titre ou un paragraphe vide.
<STYLE type=text/css>
<!--
#contenu div
{
background : #;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080618030622.gif);
background-repeat:repeat;
padding: 10px 5px 10px 5px;
border : 1px solid #000000;
color : #000066;
}
-->
</style>
D'autres possibilités existent selon la version de Blog4ever, elles feront l'objet d'un article complet sur le placement du code CSS dans un site/blog. Les 2 solutions ont le mérite d'être utilisées par tous, par contre rentrer du code à chaque balise ou chaque page devient vite fastidieux.
- 2 - Modifier les couleurs du formulaire des commentaires...
Même processus que dans l'astuce N°1, mettre le code suivant au début de la page.
<STYLE type=text/css>
<!--
/* ------ Couleurs FORMULAIRE des COMMENTAIRES ----- */
div#contenu form {
background: url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080618030622.gif) repeat scroll;
color: #000066;
}
-->
</STYLE>
Article ajouté le 2008-06-20 , consulté 250 fois
Commentaires
Sylvie site : quoideneufauvillage@blog4ever.com | le 10/07/2008 à 23:59:56Super votre blog. Je fais des recherches car je souhaiterais utiliser le diz perso de blog4ever mais je ne crois pas être assez efficace pour cela, je n'ai pas de connaissances en programmation, je dois m'entraîner avant de tout endommager !!!..On verra plus tard...C'est quand même sympa ce que vous avez mis en place pour les non initiés... Bonne continuation
PapyClic le 11/07/2008 à 00:31:03
Bonsoir Sylvie
Merci pour ton commentaire sympa... avec le DizPerso tu ne risque pas grand chose, en prenant la précaution de sauvegarder tes modifications du fichier CSS, comme je l'explique... tu peux aussi ouvrir un second blog pour tes essais. Si tu as besoin d'aide va sur le forum de Blog4ever, tu potes ta question dans catégorie "Aide DizPerso"
Dans ton adresse il y a une petite erreur le lien ne fonctionne pas, voilà ton adresse exacte:
h ttp://quoideneufauvillage.blog4ever.com
Bonne continuation
Yzéra site : http://artpassion.blog4ever.com/blog/index-141012.html | le 19/09/2008 à 19:08:19
Merci pour ton aide j'ai bien lu les explications et je vais essayer .... j'espère que ca va fonctionner mais j'ai l'impression qu'il y a un problème sur mon DIz !! "j'va voir" merci beaucoup
yzéra site : http://artpassion.blog4ever.com/blog/index-141012.html | le 19/09/2008 à 19:19:27
J'abandonne, je ne comprends rien au code CSS, je n'arrive pas à savoir ou il faut le placer car ce que je vois dans ma page Css ne correspond pas à ce que je vois dans vos explications.Lorsque je mets l'adresse url dans le Diz et que je valide il ne la garde pas il garde seulement "http" et efface le reste . C'est terrible d'être aussi nulle !!! Merci tout de même.
PapyClic le 21/09/2008 à 11:34:37
Bonjour Yzéra
Donc tu n'as pas abandonné... et tu as réussi... bravo!!!
As-tu essayé de mettre la partie cadre en transparence comme je l'explique dans cet article?
Le fond de page serait plus visible, mais peut-être préfères-tu le fond noir.
Félicitations pour ton blog, pour la diversité, la quantité et surtout la qualité des photos.
Bonne continuation
Liens
Voir les articles de la catégorie " Partie "Page" "Afficher une version imprimable de cet article
Retour aux articles
