Installation fond de page "Image" - hébergée sur RapidEchange

ACCUEIL <<< Partie "Page" <<<



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".

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

 


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.

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

 


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]

 

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

 

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>


Liste des Astuces





Article ajouté le 2008-07-04 , consulté 862 fois

Commentaires


Christian site : jardinmed.blog4ever.com/blog/index-218266.html | le 27/05/2009 à 18:29:10
Bonjour et merci pour ces explications !

Je viens d'essayer... avec succès... sauf que j'ai mal choisi mon image de fond (vert foncé et bleu clair) donc pour la couleur du texte, dur, dur, dur !


En tous cas, c'est sympa !

Poster un commentaire





http://





Merci de recopier le nombre présent à gauche dans la case de texte ci-dessous ( Pourquoi ? )





Liens

Voir les articles de la catégorie " Partie "Page" "

Imprimer cet article

Retour aux articles


Recommander ce blog | Contacter l'auteur | Reporter un abus | S'abonner au blog Flux RSS du blog | Espace de gestion

Créer un blog gratuit avec Blog4ever



Parrainé par PapyClic du blog/site "BRICABRAC" - CSS & HTML dans BLOG4EVER