couleur de fond - image de fond

obtenir ces boutons

Changer la couleur de fond

Ajouter ou changer une image de fond

1) On peut changer la couleur du fond d'un blog ou d'un élément de celui-ci. On peut aussi ajouter une image de fond à un blog ou à de ses éléments.

Exemples d'image de fond disponibles sur internet.

Remarque : pour changer l'image de fond, consulter aussi la page suivante !

* * * * *
2) Pour changer une couleur de fond, il faut, après "body" (pour le blog) ou dans le bloc d'instructions qui concerne un élément, ajouter :
background: #E5DCCD;
(en changeant le code E5DCCD par celui de la couleur choisie).

Remarque : on peut choisir une couleur de fond SEMI-TRANSPARENTE en ajoutant un paramètre aux 3 codes couleurs : exemple : background-color: rgba(255,255,255,0.5); : 0.5 correpond à 50%.

Pour chercher le code d'une couleur voir la page précédente.

Astuce : éviter d'ajouter une couleur de fond si l'image de fond est suffisamment grande, sinon la couleur et l'image de fond seront réaffichées à chaque changement de page. La couleur de fond restera blanche mais cachée par l'image.

* * * * *
3) Pour ajouter une image de fond, il faut, après "body" (pour le blog) ou dans le bloc d'instructions qui concerne un élément, ajouter :
background-color:#AFC6CE;
background-image: url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMZDgyZmJiZTMtNWUxNC00NjA1LWJhZWMtODc3ZWQwMzZiYjcz);
background-repeat: no repeat;
background-position: center;
background-attachment:fixed;
Remplacer l'adresse "http:// ..." par celle (existante ou à créer) d'une autre image.

* * * * *
4) Pour que l'image reste fixe et ne défile pas avec les messages, il faut prévoir :
background-attachment:fixed;
* * * * *
5) On peut choisir de faire apparaître le centre de l'image (center), le haut (top), le bas (bottom), la gauche (left) ou la droite (right) : soit par exemple:
background-position: left;
background-position: top left;
background-position: bottom left;
* * * * *
6) On peut aussi AJOUTER UN ARRIÈRE-PLAN QUI S'ADAPTE AUTOMATIQUEMENT A LA RÉSOLUTION DE L’ÉCRAN.

On verra ainsi toujours la totalité de l'image, quelle que soit la résolution de l'écran. Ce n'est pas le cas avec l'instruction "'background" ...

La méthode est expliquée sur cette page.

Avec l'instruction "background" par contre,
- avec une résolution basse on ne voit qu'une partie de l'image ;
- avec une résolution élevée on voit l'image et des bords de couleur si l'image utilisée est trop petite.

* * * * *
7) Dans Blogger, l'adresse URL se présente comme ceci "http://3.bp.blogspot.com/_sPwH_KmuNT8/SznMvvlxG4I/AAAAAAAAAjA/TM13G_f5v5U/s1600/Kom+Ombo8.JPG".

Si l'indication /s1600/ (haute résolution) n'est pas intégrée, mais, par exemple, /s400/ ou /s800/, il faut corriger ce nombre en /s1600/.
+
Sans cela, la résolution ne sera pas suffisante pour un fond d'écran.

* * * * *
8) Remplacer "body" par ".post" ou "main" pour obtenir une image de fond à l'arrière des messages.

Pour réduire la taille du fichier, SAUVEGARDER L'IMAGE EN FORMAT "JPEG". Le fichier sera, pour une qualité visuelle identique, 15 fois moins important et d'autant plus rapide à télécharger.

* * * * *
9) On peut aussi ajouter une image de fond en insérant le code suivant DANS UN GADGET HTML/JavaScript (OU UN MESSAGE : dans ce cas chaque message peut bénéficier d'une image de fond différente ; mais cela n'a de sens que s'il n'y a qu'un seul message par page) :
<style type="text/css">body {background-image: url(http://3.bp.blogspot.com/_sPwH_KmuNT8/SznMvvlxG4I/AAAAAAAAAjA/TM13G_f5v5U/s1600/Kom+Ombo8.JPG); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>
Pour visualiser sur ce site des dizaines de fonds d'écran différents, cliquer ici, puis, plusieurs fois à droite, sur "Page suivante". ON PEUT FAIRE DÉFILER LA PAGE JUSQU'EN BAS ET VOIR ENTIÈREMENT CES FONDS D'ÉCRAN.

Rappel : pour changer l'image de fond, consulter aussi la page suivante !

* * * * *
10) Des dizaines de codes à insérer dans un gadget HTML/JavaScript pour obtenir de superbes modèles de fond d'écran sont disponibles sur le site suivant :

http://www.thecutestblogontheblock.com/free/free-backgrounds.html.

L'adresse URL (http://...) de l'image de fond figure au début du code.

Un exemple de réalisation au moyen d'un des fonds d'écran proposés, placé dans un gadget HTML/JavaScript : calendrier "Avatar".

L'affichage sera accéléré si l'image est sauvegardée par Blogger.

* * * * *
11) On peut aussi ajouter sur un blog existant une des images de fond ou un fond semi-transparent disponibles avec l' "outil de création de modèles" de Blogger : la méthode à utiliser est décrite ici.

* * * * *
12) Une image de fond cela peut être une petite image répétée de gauche à droite et de haut en bas

Exemple de codes à ajouter pour modifier l'arrière-plan : dans un message ou un gadget HTML/JavaScript :

<style type="text/css">body{background: url(http://46.img.v4.skyrock.net/465/fond-mosaique-pour-blog/pics/2345301299_1.jpg) repeat fixed top left}</style>


5700 images pour réaliser une mosaïque sont disponibles sur : ce site.

De nombreux autres codes sont disponibles sur : ce site.

Le site http://bgpatterns.com/ permet de créer soi-même une image de fond en mosaïques en choisissant : le dessin, la couleur, la couleur de fond, l'orientation, ... On visualise et on sauvegarde.

* * * * *
13) Rappel : comment ajouter un gadget HTML/JavaScript sur un blog.

* * * * * * * *
14) On peut donner à la partie "messages" un aspect "papier".

Le code à ajouter dans :

#outer-wrapper {

est :

background: url(http://www.blogblog.com/moto_son/innerwrap.gif) repeat;


Une petite image est reproduite de gauche à droite et de haut en bas, par l'instruction "repeat".

Si on veut uniquement un affichage horizontal, utiliser "repeat x".

Si on veut uniquement un affichage vertical, utiliser "repeat y".

On peut ainsi obtenir des résultats étonnants comme un aspect "cuir" sur ce site.

notebook cahier à anneaux

A voir également : un template utilisant cette technique pour créer un cahier à anneaux : cliquer ici

* * * * * * * *
15) Exemple d'image de fond ajoutée à l'arrière d'un gadget (ici la liste de libellés) :

#Label1{
background:red url(http://...) top left ;
}


* * * * * * * *
16) On peut trouver des milliers d'images gratuites utilisables sur un blog, à cette adresse.

* * * * * * * *
17) On peut créer soi-même une image de fond avec un générateur d'images de fond.

Sur Wallpapermaker, on peut créer une image de fond avec en avant-plan : manga, personnage de BD, voiture, chanteur, ...

La ligne du haut permet de choisir entre :
- background (fond de l'image);
- main pictures (personnages à l'avant-plan);
- accessories (accessoires : cœurs, ronds, ...).

La ligne du bas permet de choisir un élément à ajouter. Cliquer dessus. Cliquer sur "Delete" pour le supprimer.

Cliquer sur "Build my Wallpaper". Cliquer sur le fond d'écran. Enregistrer sur le disque dur.

* * * * * * * *
18) Consulter également : Fond d'écran : images de fond défilantes

Modèles d'images de MAYBAYBUTTER. Fourni par Blogger.

12 commentaires:

The Perfect a dit…

Merci!
Grâce a toi mon blog va se faire une nouvelle peau!

Flogogo a dit…

Ce blog est une véritable mine d'informations utiles et variées, merci beaucoup !

D@m's a dit…

Si je veux insérer dans mon blog, une image dans un article avec un fond transparent, comment dois-je faire ? J'ai des images PNG à fond transparent mais une fois postés, leurs fond est blanc
Je cherche et je suis désespéré ^^

Merci d'avance.

Meiser a dit…

Bonjour.

En sauvegardant l'image avec "Microsoft photo editor" cela devrait fonctionner.


D@m's a dit…

Bonjour et merci de votre réponse rapide.
Je n'ai pas "Microsoft photo editor" car je suis sous Windows 7. J'ai donc effectué une sauvegarde avec le logiciel qui le remplace sous seven "Microsoft Office Picture Manager". Mais rien y fait.

Dusty river a dit…

bonjour,etant nouveau dans les blogs,je voudrai changer le fond de mon blog avec une photo que j'ai trouvé sur internet.dans ton tuto tu explique de changer la phrase par l'url de la photo:

3) Pour ajouter une image de fond, il faut, après "body" (pour le blog) ou dans le bloc d'instructions qui concerne un élément, ajouter :
background-color:#AFC6CE;
background-image: url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMZDgyZmJiZTMtNWUxNC00NjA1LWJhZWMtODc3ZWQwMzZiYjcz);
background-repeat: no repeat;
background-position: center;
background-attachment:fixed;
Remplacer l'adresse "http:// ..." par celle (existante ou à créer) d'une autre image.

mais moi je n'ai pas le meme code,voici ce que j'ai:

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: http:// none ;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
background-color: $(content.background.color);
}


Question,ou je met mon url???

Merci de m'aider.


Carine kadikela a dit…

Slt! un tout grand merci ! grâce à ton blog j'ai su en faire aussi facilement , je viens de choisir un fond , seul bémol es que leur logo est visible, comment faire pour l'enlever svp ?

Meiser a dit…


Bonjour.

On peut modifier l'image avec un logiciel de traitement des images comme "paint", puis sauvegarder et utiliser la nouvelle image comme image de fond.

Mais les corrections ne sont pas automatiques.


Lou a dit…

Bonjour,
j'essaie de mettre un arrière-plan différent sur quelques messages tel qu'expliqué plus haut. Mais il reste toujours en haut une bande de l'arrière-plan original. Auriez-vous une idée du pourquoi? Merci de votre aide!

Meiser a dit…

Bonjour.

L'image originale a sans doute un format plus petit. On ne peut que le diminuer, pas l'augmenter.


Colombe Tiredaile a dit…

Bonjour,
Je voudrais que mes articles apparaissent sur un fond semi-transparent...Mais je ne comprends rien à ce que vous expliquez et ne trouve pas les instructions que vous donnez dans le html...Sans doute parce que je ne suis pas particulièrement douée en informatique (j'avais pourtant réussi sur l'ancienne version de blogger...). Si vous pouvez m'éclairer un peu...
Merci

baboucherouge001 a dit…

Bonjour
Je suis trop triste
Voilà je ne fais que des créas en png
Le problème est le suivant, quand je poste il y a un fond blanc qui apparait c'est moche
Existe t'il un code pour que la png soit transparent sur mon blog sans que le fond blanc apparaisse
Photo editor ne fonctionne pas
Merci d'avance