Mettre un fond - généralités - Les ficelles d Anna K.

Publié dans : Modifier les fonds dans le blog - OB

Mettre un fond - généralités

Dans le CSS, le terme qui désigne le fond est background.

Pour votre fond de blog, vous avez 3 possibilités :

METTRE UNE COULEUR EN FOND

Dans le CSS, cela se traduira par

background-color:#000000

#000000est le code de la couleur Noir

Les codes couleur sont disponibles dans la FAQ

Pour les couleurs courantes, il est possible de remplacer ce code par la traduction anglaise de cette couleur : black - white - pink - violet - blue - red - green - etc

On aura donc background-color:black pour background-color:#000000

METTRE UNE TEXTURE EN FOND

PREMIER CAS : Une texture est un carré de 100*100 pixels qui va se répéter sur toute la page (attention aux raccords)

Dans le CSS, cela se traduira par

background:URL(http://fdata.over-blog.com/0/37/17/67/thumbs/css/fond-mauve-1.jpg)

http://fdata.over-blog.com/0/37/17/67/thumbs/css/fond-mauve-1.jpg est l'adresse de la texture.

Vu sa taille, ce carré de texture peut être hébergé sur OB

DEUXIEME CAS : Une texture peut avoir une ou deux bordures. Elle se présentera sous la forme d'un rectange de 1024 px de large et 100 px environ de hauteur. si sa longueur est supérieure à 1200px, ilfaudra l'héberger ailleurs.

Dans le CSS, cela se traduira toujours par

background:URL(http://fdata.over-blog.com/0/37/17/67/thumbs/css/fond-mauve-1.jpg)

METTRE UNE PHOTO EN FOND

Si vous désirez avoir une photo en fond, elle doit en général avoir un format de 1024*768 (la taille la plus courante des écrans de PC). Si sa taille est supérieure à 1200px; elle doit être hébergée ailleurs, car :

- bien trop lourde pour être hébergée sur OB

- OB redimensionne les images de grande taille en 1200*1200.

Dans le CSS, cela se traduira par

background-image: url(http://www.hiboox.com/images/2806/8bjd5ua.jpg);

background-repeat:no-repeat;background-position:center;background-attachment:fixed;}

Pour des explications plus détaillées sur chacun de ces fonds : se rendre là

Voir les 74 commentaires - Ecrire un commentaire
Recommander

Précédent : Proposer à ses visiteurs d'héberger... Retour à l'accueil

Commentaires

re Annak
non c'est sur ce blog là..tout est coché..et même en passant en mode avancé...
voiçi ce qui est enregistré sur le CSS..
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-image:URL(

);background-attachment:fixed; }
#ln_0 {background:none;}
Alors là je comprends rien ..en refaisant ton code mal lu...mon image apparait..Vive le HTLM
Si tu te rends sur les nouvelles coordonnées tu vois bien qu'il n'y a rien !
Je comprends pas ..j'arrive bien à faire certaines choses ..je passe 4/5 h sur ton blog ..grace à toi j'arrive à créer quelques fantaisies ..mais bon là ?
Pardon de te déranger
A+++++++

Commentaire n°51 posté par Talant le 16/03/2008 à 13h49

Je comprends mieux, je n'allais pas voir à la bonne adresse

Réponse de Anna K le 16/03/2008 à 18h00

re Ah je vois qu'il ne veut pas de ma nouvelle adresse ..pourtant je suis passée par mon nouveau blog

http://promenadebuissonniere.over-blog.com/

promenade buisssonniere...Berylverte!
Merci Annak

Commentaire n°52 posté par Talant le 16/03/2008 à 13h58

Je passe

Réponse de Anna K le 16/03/2008 à 18h03

Re talant pour promenade
Bon c'est tout vert maintenant..ce qui est bien je n'ai plus de cadre blanc ..mais je n'ai tjrs pas mon image !
Aussi j'ai " récupérer mon autre blog ! Je ne sais pas ce qui c'est passé ..mais j'ai eu peur !
Bon je vais tenter de dormir ..et toi aussi ..fera peut-etre plus clair demain !
Mille excuses de te déranger!

Commentaire n°53 posté par Talant le 17/03/2008 à 00h55

Annak
YESSSSSSSSS j'ai réussi ! Il est 2h du mat..mais j'ai enfin compris quelques petites choses !Un immense merci à toi !

Commentaire n°54 posté par Talant le 17/03/2008 à 02h13

Ouh la la, tu te couches tard

Réponse de Anna K le 18/03/2008 à 10h22

Bonjour Anna, j'ai un soucis avec le fond de mon blog. Je souhaite mettre en fond, le même vert qu'il y a en page d'accueil. Et que cette couleur fasse tout le fond de mon blog. Mais je n'y arrive pas, pas doué en CSS.

Commentaire n°55 posté par Marc le 21/04/2008 à 18h33

Je passe

Réponse de Anna K le 23/04/2008 à 09h25

Bonjour Anna !
Je n'arrive plus à changer mon CSS dans global, je suis en V2 j'ai fait plusieurs essais mais rien aucun changement.
Merci

Commentaire n°56 posté par Pimousse et ses loulous le 19/05/2008 à 15h12

Tu fais bien tes changements dans le CSS Mon Style ?

Réponse de Anna K le 20/05/2008 à 09h22

Bonjour Anna.k J'ai bien reçu votre message et je vous en remercie. Je me suis mal exprimée je voulais supprimer uniquement le fond de la page d'accueil "texte libre" la première page avant les articles. Quelle est SVP la procédure ? Par ailleurs, je ne sais pas à quoi correspond "texte libre" sur le CSS.
Je vous remercie de votre réponse. Amicalement Maguy

Commentaire n°57 posté par Maguy le 29/05/2008 à 11h02

bon anniversaire à tonblog
cerisette

Commentaire n°58 posté par CERISETTE le 26/06/2008 à 16h15

Je crois que je vais jamais m'habituer a changer mon Fond hehehe ca marche jamais ... Voila mon Prob : J'avais mis un de tes Design déja fabriquer Ray Lime Manga Filles ... Mais la je voudrais changer pour Ray Gris seulement mais avec un de mes Fonds a moi qui est celui ci [url=http://www.servimg.com/image_preview.php?i=1800&u=11059521][img]http://i55.servimg.com/u/f55/11/05/95/21/gra_1210.jpg[/img][/url] Mais je voudrais garder toute la meme Dispositions des Éléments que j'ai Déja ... Je veux seulement mettre un Fond que j'ai ... Voila

Commentaire n°59 posté par Sophie Grenier le 26/08/2008 à 06h12

Réponse chez toi

Réponse de Anna K le 27/08/2008 à 16h27

Bonjour Anna, J'ai une petite question moi aussi... J'ai mon CSS qui se présente comme ça : body { background: #1D2429; color: #FFF; font-family: arial, sans-serif;font-size:12px; } a { text-decoration:none; color:#D1378E; } a:hover { text-decoration:underline; color:#F12AAD; } J'aurais aimé savoir à quel endroit je dois ajouter background-image: ? Merci beaucoup !!!

Commentaire n°60 posté par HELENE le 30/08/2008 à 14h04

Bonjour Hélène :)
Tu as un design assez compliqué : si tu changes le fond, il ne se verra qu'à l'extérieur des marges (là, où c'est très foncé actuellement.
Tu rajoutes ton fond ici en rouge :
body {
    background: #1D2429;
    color: #FFF;
    font-family: arial, sans-serif;font-size:12px;background-image:url(adresse de l'image);
    }

Réponse de Anna K le 31/08/2008 à 10h12

Merci pour la réponse, mais j'ai dû faire une erreur, ça ne fonctionne pas quand je clique sur prévisualiser.... J'ai mis écrit ça à la place de ton texte rouge : background-image:url=http://i58.servimg.com/u/f58/11/28/58/77/m4110010.jpg; Si tu voulais bien me dire où est l'erreur... Pour l'instant, j'ai laissé le style par défaut... Encore merci !

Commentaire n°61 posté par HELENE le 01/09/2008 à 06h09

Bonjour hélène :)
il faut mettre
background-image:url(http://i58.servimg.com/u/f58/11/28/58/77/m4110010.jpg)

Réponse de Anna K le 03/09/2008 à 19h36

Merci beaucoup !!! J'ai prévisualisé, ça fonctionne !!! Juste que l'image n'est pas adaptée, faut que j'en trouve une autre ;) Merci !!!!!!!!!!!!!!!!!

Commentaire n°62 posté par HELENE le 04/09/2008 à 05h39

bonjour anna k j'ai hésité longtemps avant cette demande car je te sais surchargée d'appel au secours et sans doute souvent pour ce ccs je n'y arrive pas ;pourtant je suis a la lettre,mais la phrase que moi j'ai ne correspond aux divers exemple qu'on donne body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#000; background:#FFF; }et je voudrais inclure ceci http://idata.over-blog.com/1/28/52/74/objet_002.jpg) peux tu m'aider stp

Commentaire n°63 posté par CARAMBAOLE

le 11/09/2008 à 22h17

Je passe sur ton blog

Réponse de Anna K le 12/09/2008 à 18h29

un grand merci anna ,avec ton aide c'est devenu si simple,néanmoins j'ai vu que tu as rajouté une formule dans le code du fondentre les flash et idata c'était donc normal que je n'y arrivais pas maintenant que l'image y est je suis un peu décu de l'effect ,si je choisi un autre fond devraisje aussi mettre cette formule en tout cas un énorme merci

Commentaire n°64 posté par CARAMBAOLE

le 12/09/2008 à 22h01

Oui, il n'y aura que l'adresse a modifié :)

Réponse de Anna K le 15/09/2008 à 09h29

je ne sais pas le quel background je dois prendre pour changer de fond. Je commence.merci

Commentaire n°65 posté par wisti le 04/10/2008 à 10h19

Bonsoir Anna K, votre blog est magnifique ! je me présente, je suis prof et je suis en train de monter un blog avec quelques élèves, pour qui j'ai créé un modèle. Or je suis en train de m'arracher les cheveux pour changer la couleur de fond depuis plus de quatre heures... est-ce en raison du choix du design ? technologic (oui je sais, le seul pour lequel vous ne donnez pas de conseil... grrr) je ne sais pas parce que j'ai bien essayé aussi avec Ethnic et je n'arrivais pas à ôter les images bref. La seule ligne body que je trouve dans le premier cadre CSS (design technologic) est précédée de /*@group user*/ et je ne sais pas si c'est là qu'il faut mettre la couleur. En tous cas, ça ne marche pas ! je voudrais mettre un bleu clair (#CCFFFF) en fond pour éclairer le blog, voire changer des couleurs dans les modules, mais je bloque. Oscour ! Bien cordialement, Achtung

Commentaire n°66 posté par Sig le 15/11/2008 à 00h32

Yoooooooooooh !

à force, je me suis fait un désign ENFIN un peu chiadé.... mai ça fait 48 heure que je fais que ça.... merci Annack :! Ton blog m'a été très utile...

Commentaire n°67 posté par Koulou (flegroll) le 20/11/2008 à 16h51

Coucou, voila j'ai un blog et j'aimerai si possible changer dans le mode css juste la couleur du fond. En fait j'aimerai garder le meme fond mais juste changer la couleur. A la place du rouge mettre du violet. Voici mon autre blog où il faut changer le fond : http://simona-peycheva.over-blog.com/ Peut tu m'aider car j'ai peur de faire des bétises car je ne m'y connais pas du tout. Peut tu me le générer. merci bisous

Commentaire n°68 posté par aurelee le 14/01/2009 à 20h40

J'ai un petit soucis pour mettre une image en fond : j'ai mis l'adresse d'un gif (avec "animations") mais sur mon blog,il n'y a plus les animations du gif. Est-ce normal? j'ai pourtant trouver d'autre blog où le fond était animé...

Commentaire n°69 posté par Elise le 08/02/2009 à 19h06

bonjour Anna k, je commence un blog depuis un peu plus d'une semaine, j'ai choisi le thème prédéfini : technologie blue mais maintenant je voudrais mettre une image de fond et je ne sais pas comment faire ? merci.

Commentaire n°70 posté par Lili16.04 le 19/02/2009 à 16h26

Je suis vraiment nul en informatique.
Depuis un cetains temps je voudrais changer de fond.
Malheureusement c'est du charabia touts ces commentaires.
Est quelqun pourrait m explique dans un langage simple comment faire avec une manipe simple

Commentaire n°71 posté par reuven le 01/05/2009 à 14h15

Bonjour, ce site est super et les explications y sont très à la portée de chacun merci beaucoup !
j'ai un petit problème avec le CSS pourrais tu m'aider s'il te plait ? voilà j'ai réussi à aggrandir les colonnes mais je voulais modifier le fond "acceuil" et j'ai ajouté la formule dans body du CSS background-image: url(http://i41.tinypic.com/2rcu6n5.jpg);
background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
voilà ce que j'obtiens, mais ça ne marche pas ! ou ais-je fais l'erreur ? merci beaucoup pour ta réponse !
amicalement ... Maria

Commentaire n°72 posté par Pilouchi le 29/06/2009 à 10h54

Victoire!! ça fait des jours que je m'escrime à comprendre comment changer le fonds de mon blog et j'ai enfin réussi!!!
Merci!! Ce blog m'aide beaucoup pour personnaliser mon blog!

Commentaire n°73 posté par P'tite Poulette le 18/09/2009 à 15h07

rebonjour Anna
je ne sais plus sur quel article je t'avais appelée au secours pour le blog, mais ca y est, problème résolu.. j'espère. Tu veux bien aller jeter un coup d'oeil? merci

Commentaire n°74 posté par croc le 25/09/2009 à 00h49