Mettre une image en fond - Généralités

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

Mettre une image en fond - Généralités

OU TROUVER L'IMAGE QUE VOUS METTREZ EN FOND ?

Toutimages : j'y ai trouvé de très belles images
Hebus : Très grand choix. En français.
Site de Blog-trotteurs : des photos haute-résolution. Très belle qualité.

COMMENT IMPORTER UNE IMAGE ?

Comme je vous l'ai expliqué dans Mettre une texture - généralités, une texture mesure généralement 100*100 pixels et va se répéter sur toute la page. Sa taille étant minime, elle peut être hébergée chez Over-Blog. Par contre, l'image qui va occuper toute la page, est de grande taille : au minimum 1024 * 768 pixels. C'est pourquoi on va l'héberger afin que la résolution reste bonne et qu'elle ne soit pas redimensionnée. (Comment l'héberger ?)

Mise à Jour: janvier 2010

Voir les 11 commentaires - Ecrire un commentaire
Recommander

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

Commentaires

Jolie image de fond. Astucieux le fait d'avoir mis ladite image fixe tandis que l'ascenseur fait dérouler le texte de ton site...

Commentaire n°1 posté par DR le 03/09/2006 à 12h55

Ce n'est pas difficile à faire (pour une image de la taille du blog), il faut rajouter ce qui est en gras

body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small ;background:#9999CC;background-image: url(http://www.hiboox.com/images/3406/b1251fc6.jpg);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}

Réponse de AnnaK le 03/09/2006 à 15h00

Dans ton commentaire n°2, tu as tapé la dernière ligne sans un seul espace et du coup elle déborde sur la droite ! Je remets la règle CSS complète ici pour d'autres lecteurs :

body { margin : 0px; font-family : Verdana, Helvetica, Arial, sans-serif; font-size : x-small ; background-color: #9999CC; background-image: url(http://www.hiboox.com/images/3406/b1251fc6.jpg); background-repeat : no-repeat; background-position : center ; background-attachment : fixed;}

A noter aussi, pour les flemmards, qu'on peut écrire toute la description du fond en une seule fois :

body { [... le début ...]
    background : #9999CC
       url(http://www.hiboox.com/images/3406/b1251fc6.jpg)
       no-repeat fixed center; }

mais l'ordre dans lequel on écrit les propriétés est alors important.

Commentaire n°2 posté par brendufat le 18/09/2006 à 10h45

C'est intéressant ça. Je ne savais pas que derrière le background, on pouvait mettre plusieurs données. Merci :)

Réponse de AnnaK le 18/09/2006 à 14h26

Bonjour Anna

Malgré une image aux bonnes dimensions, cette dernière que j'ai voulu placer en fond d'écran se répète même avec no repeat !!

Une solution à ce problème ?

Commentaire n°3 posté par Ptitamour le 14/11/2006 à 10h18

Bonjour :) Tu as dû l'enlever entre-temps car je ne la vois pas sur ton blog.

Plusieurs possibilités :

1) ton image de fond est bien hébergé ailleurs que sous OB ? car OB redimensionne les images en 600*600 px, donc elle serait devenue trop petite.

2) tu n'as pas oublié de ; ou de } ?

Réponse de Anna K le 14/11/2006 à 10h37

Je vais vérifier car n'ai pas pensé qu'OB redimensionnait cette dernière Anna mais elle est bien et belle présente et répétée dans la colonne centrale car ne prend pas tout l'espace, peut être à cause du redimesionnement

Merci, je te tiens au courant

A bientôt

Ptitamour

Commentaire n°4 posté par Ptitamour le 14/11/2006 à 11h37

Ok, je la vois maintenant. Elle n'est donc pas assez haute et semble faire 600*600 px. La hauteur moyenne actuelle des écrans est de 768 px. Il faudrait prévoir cette taille là.

Réponse de Anna K le 14/11/2006 à 12h44

Salut Annak,
J'avais déjà posté un commentaire, c'était plutôt une question concernant la mise en place d'un fond pour mon blog. Mon image est hébergée chez Hiboox, et quand je vais dans le mode CSS, je fais tt skil ya à faire, sans succès : mon fond ne veux pa se mettre en place. Je fais et re-fais tjs les meme manips, mais depuis que je suis en V2 ça ne veux pas (over-blog est contre moiiiiiiii sniiif).
Tu m'avais déjà répondu en me donnant le code à écrire après "body {" ... mais sa ne marche pas. Si tu connais la solution s'il te plaît donne la moi, parceque je pète un cable... (snif).
Merci d'avance
Lapin

Commentaire n°5 posté par Lapin le 03/08/2007 à 17h46

Je viens voir

Réponse de Anna K le 09/08/2007 à 16h08

Bon, apres de nombreuses tentatives j'abandonne, je suis trop mauvais car je n'y arrive pas...

Commentaire n°6 posté par Ami le 09/02/2008 à 02h27

Yatta! J'y suis arrivé !!! Merci AnnaK je suis presque satisfait de ma page d'acceuil...
Heureusement qu'il y a ton site :)

Commentaire n°7 posté par Ami le 09/02/2008 à 02h55

Impossible, je n'y arrive pas!!!

Commentaire n°8 posté par Dany le 02/10/2008 à 15h19

Un petit conseil, pouvez-vous m'aider? Je voudrais mettre une image de fond sur mon blog, j'ai essayé,mais rien ne se passe... avec l'aide de mATILOU AUSSI...QUE FAIRE??? MERCI. dANY

Commentaire n°9 posté par Dany le 02/10/2008 à 16h15

Bonjour Dany :) ton design est assez compliqué car composé de plusieurs images.
1) As-tu déjà une adresse d'image de fond ?
2) veux-tu que le fond se voit sur les côtés seulement ou même sous les articles et modules ?

Réponse de Anna K le 06/10/2008 à 09h20

bonjour!
ça fait un petit moment que je m'excrime sur le changement du fond d'écran de mon blog
- j'ai réussi à enlever la couleur de fond d'origine (design Ray)
- puis j'ai hébergé mon image, copié l'url, toussa
- puis je suis allée rentrer ça dans le CSS
c'est là que y'a un hic
body apparaît en tout début de CSS ainsi que vers la fin (là, d'ailleurs, où j'avais modifié pour mon curseur) ... alors j'ai opéré les modifs aux deux endroits à chaque fois

au début du CSS, ça donne ça :
body {
font: normal 62.5% Arial, Helvetica, sans-serif;
}

#global {
background-repeat: repeat-x;
}

body, #miniGlobal {
background-color: none; background: url(http://www.casimages.com/img.php?i=090706055517540442.jpg); background-attachment:fixed; background-position:center;
color: #e3e3e3;
}

et en fin de CSS, ça donne ça :
/* @group user */

body { cursor:url(http://www.ladylony.com/cursores/cut33.cur),default;
background-color: none; background: url(http://www.casimages.com/img.php?i=090706055517540442.jpg); background-attachment:fixed; background-position:center;
color: #E3E3E3;
font-family: Arial,Helvetica,sans-serif;
}

tout ça pour dire que mon image n'apparaît pas, que maintenant, j'ai un affreux fond blanc (serait-ce le fameux code #e3e3e3? Faut que je l'enlève aussi, ça?)

Ze souis perdoue ... si tu as quelques minutes à me consacrer, je serais ravie

A bientôt, donc, et belle soirée! ;)

Commentaire n°10 posté par mariev le 06/07/2009 à 18h43

bonjour!
je me demande si à force de vider mon cache, z'ai pas fait une bêtise ... je n'arrive même plus à changer la taille de la police des commentaires ...et la photo de fond n'est toujours pas arrivée ...
belle soirée à toi! ;)

Commentaire n°11 posté par mariev le 11/07/2009 à 19h51