[HTLM] Image de fond + texte par dessus

Image de fond + texte par dessus [HTLM] - HTML/CSS - Programmation

Marsh Posté le 08-08-2011 à 22:25:56    

Bonjour, :hello:

 

J'ai besoin d'aide sur un truck plutôt simple en html, mais je suis plutôt nul (d'où ma venu ici :d)

 

Objectif:
J'ai une image de fond, et j'aimerai avoir un cadre (ou un tableau de 1 case x 1 case) avec du texte dedans (et devant l'image de fond bien sur).

 

Avancés: Pas terrible ^^
J'ai rien réussi de convainquant par moi même.
Par contre j'ai réussi a trouver un générateur de html mais il me sort un code de 50 lignes impossible à modifier par la suite. (le site en question http://www.mesoutils.com/generateur.php )

 

Details de mes attentes:
En gros l'image fait 170pix de long x 215pix de large.
J'aimerai en gros avoir un cadre (sans bordure visible) par dessus (où je pourrais y mettre entre 4 a 8 lignes de texte), parfaitement aligné sur l'image de fond.

 

J’insérerai ceci dans un "gadget" pour un blog. Mais ça nous intéresse pas trop ici.

 

Le debut de mon code: En gros pas grand chose.

Code :
  1. <img src="http://img846.imageshack.us/img846/5144/bgredsmal.jpg" />
 

Merci d'avance :jap:


Message édité par yanhoupa le 08-08-2011 à 22:32:01

---------------
Ventes Matos PC / Apple
Reply

Marsh Posté le 08-08-2011 à 22:25:56   

Reply

Marsh Posté le 09-08-2011 à 12:37:44    

up


---------------
Ventes Matos PC / Apple
Reply

Marsh Posté le 09-08-2011 à 13:04:54    

Bah soit tu mets ton background sur la page et tu fais ton cadre, soit tu fais u cadre avec le texte voulu et tu y appliques le background.
 
A mettre dans ton fichier CSS, soit dans la balide Body, soit dans le style de ton cadre :  
 

Code :
  1. background-image: url('dossier/image.jpg');


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
Reply

Marsh Posté le 09-08-2011 à 14:12:24    

ah merci!
mais moi mon lien d'image ne sera pas sur mon site, comment mettre le lien ?

 

Ca marche ca ?:

Code :
  1. background-image:http://img846.imageshack.us/img846/5144/('bgredsmal.jpg');


(sachant que pour le moment le lien de mon image c'est ca: http://img846.imageshack.us/img846/5144/bgredsmal.jpg )


Message édité par yanhoupa le 09-08-2011 à 14:12:59

---------------
Ventes Matos PC / Apple
Reply

Marsh Posté le 09-08-2011 à 15:32:54    

Non, faut pas remplacer l'attribut, mais le chemin vers le fichier. C'est plus ça qui va bien :  
 

Code :
  1. background-image:url('http://img846.imageshack.us/img846/5144/bgredsmal.jpg');


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
Reply

Marsh Posté le 09-08-2011 à 16:11:17    

Merci mais ça ne marche pas. Y'a pas des "truck" à rajouter ?


---------------
Ventes Matos PC / Apple
Reply

Marsh Posté le 09-08-2011 à 16:30:20    

EDIT: J'ai trouver un truck qui marche mais pas pour moi
<BODY BACKGROUND="URL">
 
Le soucis est que je suppose que le "background" ne marche que pour des "vraies" pages, or moi c'est un gadget pour un blog. Ou alors il faut y jouter des "infos", je sais pas.
 
Donc je pense qu'il faut revenir a mon "idée" de base, a savoir une image, et par dessus un tableau avec du texte dedans.


---------------
Ventes Matos PC / Apple
Reply

Marsh Posté le 09-08-2011 à 17:19:54    

Un background est soit sur toute la page, soit dans un élément sur lequel tu appliques la bonne syntaxe CSS.
 

Code :
  1. <div style="background-image:url('http://img846.imageshack.us/img846/5144/bgredsmal.jpg');">Le petit texte que je veux mettre</div>


 
Et ça marche aussi avec les tableaux :  
 

Code :
  1. <table>
  2. <tr>
  3.  <td style="background-image:url('http://img846.imageshack.us/img846/5144/bgredsmal.jpg');">Le texte que je veux</td>
  4. </tr>
  5. </table>


 
http://petitionenligne.free.fr/tes [...] round.html
 
Après, il faut pousser les syntaxes CSS pour faire ce que tu veux.
 


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
Reply

Marsh Posté le 09-08-2011 à 17:21:56    

Il te suffit de créer une div  [:spamafote]  
 

Code :
  1. <div style="width: 215px; height:270px; background: url('http://img846.imageshack.us/img846/5144/bgredsmal.jpg');">
  2. <p>
  3. La tu mets ton texte
  4. </p>
  5. </div>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed