Image de fond dans un seul article

Comment placer une image de font dans un seul article comme dans cet exemple ?

- Ouvrez un bloc-note

- Copiez collez le code qu'il y a ci-dessous :

<div style="background-image:url(url_de_l'image_ici);"> Ici votre article </div>

- Charger une image dans un sous dossier "Mes images" (attention au couleurs de celle-ci pour qu'ensuite l'article puisse rester visible [Exercice style moins facile qu'il n'y parrait])

- Relever l'url (l'adresse) de l'image

- Collez l'url dans le code à la place de "url_de_l'image_ici", ce qui va donner par exemple :

<div style="background-image:url(http://idata.Images-/Beach2.jpg);"> Ici votre article </div>

REM.: Si dans votre code commence par http://fadata... il y a "thumbs/" RETIREZ-LE et changer le "fdata" par "idata" sinon votre image de fond aura la taille d'un timbre poste (o;

- Ouvrez votre article comme à l'habitude, passez en html (icone "Source") et copier/coller le code que vous venez de faire

- Passer en mode design, écrivez la première phrase de votre article, effacez la phrase "Ici votre article", continuez ensuite comme à votre habitude.

Publié dans : Astuces - Par Vger
Ecrire un commentaire - Voir les 9 commentaires - Recommander

Précédent : Mise à jour 1.6 Retour à l'accueil Suivant : Alignement texte/image

Commentaires

eu... j'ai essayer comme tu la dit mais sa ne marche pas comment on fait !?

Commentaire n°1 posté par sam le 19/11/2005 à 15h25

Tu a bien mis le lien vers ton image, tu a bien vérifier ne rien avoir oublié, tu a bien mis ça en mode "Source" ... sans explication de ta part je ne sais pas t'aider :o/ Sauf à dire, regarde chez moi ...ça fonctionne :o?

Réponse de Vger le 28/11/2005 à 04h26

eu... chez moi ça marche très bien, exemple dans mon article: "Astuces pour obiens" dans lequel les archives vinéennes sont en lien.

Commentaire n°2 posté par babo le 21/11/2005 à 11h12

Merci pour le lien :P

Réponse de Vger le 28/11/2005 à 04h24

sam moi ça marche sous Firefox mais sous IE ma tortue se prend pour David Coperfield.

Commentaire n°3 posté par babo le 22/11/2005 à 17h50

Babo.. MDR.... Ou est le lièvre ??? ;o))))))

Réponse de Vger le 28/11/2005 à 04h28

Euh le lièvre, lui il est tellement rapide qu'on ne le voit pas à l'image lol. Et pour ma tortue c'est un pb avec "le contenu actif" lorsque l'asceneur est au milieu. Après pour faire réaparaître la tortue, au choix repointer un lien ou agiter l'ascenseur. Mais sous Firefox affichage nickel. Longue vie à Firefox.

Commentaire n°4 posté par babo le 01/12/2005 à 23h19

Vi longue vie à Firefox (version 1.5 maintenant

)
Tu sais les tortues pour le moment faut pas les laisser dans le jardin, sinon elle s'enterre, c'est pour ca que tu la vois plus ... bon oki, je connais la sortie =====>>>

Réponse de Vger le 03/12/2005 à 16h56

salut

merci beaucoup pour ce blog! ;)

ca marche mais malheuresment la photo apparait deux fois. (enfin une fois et demie)

c'est génant car ca rend assez moche au final. :/

sais tu comment je peux régler ca?

Commentaire n°5 posté par blick le 17/02/2007 à 14h39

Non seulement, ça marche mais en plus, je suis super content du résultat ! ! !
Un grand merci !!

Commentaire n°6 posté par christian le 28/02/2007 à 18h49

Pas de quoi ;)

Réponse de Vger le 01/03/2007 à 07h37

Encore merci de ton aide, j'ai naviguer un peu sur ton blog et il y a beaucoup de chose intéressante!
Je pense qu'avec les aides que tu fournis, je vais avancer dans le boostage de mon blog.
Encore merci

Commentaire n°7 posté par lyns le 03/04/2007 à 03h18

bonjour, pareil que "blick" enfin mon image se repète 4fois et juste le haut de mon image?
c'est genant pourtant le principe me plait bien.
Y a t'il une solution (taille de l'image trops petite)?
Merci pour la reponse

Commentaire n°8 posté par Luc le 08/03/2009 à 02h09

Bonsoir,
je suis tout à fait novice et je ne comprend vite mais faut m'expliquer longtemps.
bloc-note où ????
URL de l'image ??? je veux mettre une des miennes.
Merci beaucoup

Commentaire n°9 posté par Gladysne le 02/05/2009 à 21h10