Mettre un fond sur un blog OB

Mardi 13 janvier 2009 2 13 /01 /2009 21:46

Mettre un fond sur un blog OB

Un joli fond tout en transparence comme sur l'image ça vous tente?

Alors c'est parti pour un tuto cyberquiche!
1 - Bien sûr il faut avoir une belle image avant de penser à la mettre en fond! Celle de ce modèle mesure 1400x994 comme ça pas de pb de démarquation!
2 - Il vous faut ensuite héberger votre image. Ceux qui ont un ancien blog canalblog n'auront pas de soucis avec ça pour les autres cherchez un hébergeur d'images, car à ma connaissance OB ne permet pas de telle dimension! Voyez du côté de flickr

3 - on commence par aller dans "design", "mode avancé", "mon style"

4 - le css à corriger est le suivant :
la ligne "#Body" dans "Définitions d'affichage basiques" en général la première , ce qui va donner :

body {margin:0px; padding:0px; background-color:#000000 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF; background-image:url(http:votre image.png); background-repeat: no-repeat ; background-attachment:fixed;}

la partie en rouge est le script à ajouter.

si vous voulez que votre image soit visible sous votre texte toujours comme su l'image en modèle ci dessus, vous devez mettre votre aussi corrigé votre "#global" dans "Définitions de structure de la variation" de la façon suivante

#global {padding: 0px; margin: 0 auto; width:1000px; background-color:#DCF4FF;background-image:url(http:votre image.png); background-repeat: no-repeat ; background-attachment:fixed;}

Par Lavande - Publié dans : Over-Blog - Ecrire un commentaire - Voir les 4 commentaires

Précédent : Des conseils de design Retour à l'accueil Suivant : Blogtuto le retour...

Commentaires

Bonjour, Je vous présente un tout nouveau site de Formations vidéos en ligne : http://www.formamotion.com Formamotion vous propose de nombreuses formations vidéos informatique, tutoriel videos dans différents domaines à savoir : - le graphisme - la programmation - le réseau - la sécurité - les systèmes - la bureautique - le développement web A travers ces différents domaines vous trouverez plusieurs sous catégories. Exemple : pour la catégorie : Graphisme Vous trouverez les sous catégories suivantes : Photoshop CS4, Flash CS4, Illustrator CS4, After Effects CS4, etc ... L'inscription est gratuite et vous permet de visualiser toutes les vidéos gratuites en ligne ! http://www.formamotion.com Merci de donner votre avis, vos impressions sur le site. Cordialement,

Commentaire n°1 posté par formamotion le 07/02/2009 à 20h19

Merci ! :D

Commentaire n°2 posté par Motoko le 21/04/2009 à 12h46

merci pour cette explication.J'aimerai changer mon blog, et je cherche des idées...
biz

Commentaire n°3 posté par lory le 20/09/2009 à 08h56

bonjour, et merci pour ce blog rempli d'astuces.
En procédant comme ci-dessus, j'arrive a avoir le fond d'image étendue, mais que sous IE, quand je suis sous firefox, j'ai un fond blanc, par contre lorsque je regarde la prévisualisation sous firefox et bien je vois le fond d'image que j'ai choisi.. Je ne comprends pas, si vous pouviez me venir en aide.. Merci. bonne continuation

Commentaire n°4 posté par Stéphanie le 25/09/2009 à 15h21