Se connecter / S'enregistrer

Résolu Pourquoi l'image de fond de mon site internet ne s'affiche pas ?

Solutions (44)
Tags :
  • Arrière plan
  • Index
  • Sites Internet
  • Programmation
|
Bonjour à tous.
J'en appelle encore une fois à votre savoir pour résoudre un "petit" problème.
J'ai créer il y a quelques temps grâce à votre aide mon site internet, mais il y a un hic.
Mon image de fond ne s'affiche pas correctement chez tout le monde, voir même ne s'affiche pas du tout... Parfois elle est décalée, enfin bref, ça ne va pas.
Je voudrais savoir comment éviter cela.
Si quelqu'un pourrait me faire un "index.html" sa serait vraiment sympa
http://technixgraphist.hebergratuit.com
Si quelqu'un a un peu de courage..
Nom des images :
Image de fond :
background.jpg
boutongalerie.jpg
boutoncontact.jpg

Quelques indications : le "boutongalerie.jpg" est un lien vers http://technixgraphist.hebergratuit.com/piwigo/
Et, je voudrais écrire un texte court comme sur l'image de fond, juste à coté du bouton "contact"

Je vous remercie d'avance
Cordialement
  • Meuniers a édité ce message
Contenus similaires
Meilleure solution
partage
, Modérateur |
Salut,

- Comment mettre mon texte en blanc?
color
- Comment le grossir?
font-size
- Comment faire des retours à la ligne? u_u
Soit avec des <br/> (déconseillé d'en avoir plus d'un à la fois), soit en utilisant du CSS avec margin
- Comment faire en sorte que la publicité "retourne" tout en haut de la page?
En utilisant des HTML Anchors, regarde le chapitre HTML Links - The name Attribute

Tu peux te balader sur le site w3schools.com pour avoir tout plein d'autres infos.
  • Commenter cette solution |
Score
0
òh
òi
|
Jusqu'ici tout allait bien, mais je me suis rendu compte que sur un écran de 15" avec la meilleure résolution, le site est tout simplement... ILLISIBLE
Les textes se superposent, rien n'est dans le bon ordre, bref c'est une vrai galère, je vais essayer de voir ce qui ne va pas...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Il y a eu une autre question aujourd'hui, du coup j'ai refait des recherches :
http://css.flepstudio.org/en/css-tips/100-percent-backg...
http://css-tricks.com/perfect-full-page-background-imag...

Tu devrais pouvoir te débrouiller avec ça.
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par JUJU51.
  • Commenter cette réponse |
Score
0
òh
òi
|
Je viens de finir ma page de mon site, grâce à vous, à votre aide...
Je ne sais comment vous remercier, j'ai pu apprendre plein de choses sur le HTML, CSS etc...
Je vous suis extrêmement reconnaissant de ce que vous m'avez fait et de ce que vous faites pour le site.
Je vous remercie mille fois et vous souhaite une très bonne journée.

PS : Si vous voulez aller voir le résultat : http://technixgraphist.hebergratuit.com

Faites moi part de vos critiques si vous en avez =)
Cordialement, Technix.

PS² : Merci...
  • Commenter cette réponse |
Score
0
òh
òi
|
Je me disais aussi, ça serait trop beau x)
Enfin, c'est pas le plus gênant, mais si tu retrouves, je suis preneur bien sûr =)
Je vous remercie encore!!
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Bah si si j'avais bien compris ça.
On peut mettre une image en background qui s'adapte à toutes les résolutions et qui prend toute la largeur sans se répéter.
J'avais trouvé un lien y'a quelques temps, mais je n'arrive pas à remettre la main dessus.
  • Commenter cette réponse |
Score
0
òh
òi
|
Oui en fait j'ai mal formuler ma phrase une image fixe qui prend toute la largeur de la fenetre sans se répeter et qui s'adapte a toute les résolutions... :) 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
allstar27 a dit :
C'est impossible de mettre une image fixe (sans repeter le background) pour que ca s'adapte sur toute les résolutions...

Si si c'est possible. mais il faut aussi prendre en compte qu'avoir la même image en 800x600 ou 1900x1200 en background, ça donne pas du tout la même chose.
Soit tu prends une grosse image et c'est long à télécharger, et les petites résolutions vont avoir un drôle d'effet. Soit tu prends une petite image, rapide à télécharger, mais les grosses résolutions auront l'image toute pixelisée.
  • Commenter cette réponse |
Score
0
òh
òi
|
C'est impossible de mettre une image fixe (sans repeter le background) pour que ca s'adapte sur toute les résolutions...
  • Commenter cette réponse |
Score
0
òh
òi
|
Ahh ça marche enfin, j'ai tout mon texte comme je le voulais =)
Je vous embète quand même encore un peu pour un détail, la taille de la page :/ 
Je voudrais qu'elle rentre "Pil Poil" dans la fenêtre :/ 
PS : MERCIIIIII Je vous remercie mille ois pour tout ça :) 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
  1. <span>ligne1</span>
  2. <br/>
  3. <span>ligne2</span>


...
  • Commenter cette réponse |
Score
0
òh
òi
|
Pourrais tu me donner un exemple d'utilisation de ce "<br/>" s'il te plaît?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Un retour à la ligne, ça se fait avec <br/>
Pour sauter plusieurs lignes, c'est mieux d'utiliser margin après, plutôt que d'enchainer 15 <br/>, comme dit dans mon précédent message
  • Commenter cette réponse |
Score
0
òh
òi
|
Oula La ><
En gros, je dois tout changer?
PS : Je n'arrive toujours pas à faire des retours à la ligne avec margin :/ 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Faut faire un site en pourcentage pour que ça s'adapte à la taille de la page.
  • Commenter cette réponse |
Score
0
òh
òi
|
Non, et même en zoomant à fond, toujours pas de barre en bas^^
  • Commenter cette réponse |
Score
0
òh
òi
|
Non pas de résolution universelle (dommage)

T'es sure que t'as pas dézoomer avec ton portable? (en bas à droite dans la barre de notification sur IE)
  • Commenter cette réponse |
Score
0
òh
òi
|
Mais il n'y a pas une "résolution unique, universelle"?
Par exemple sur le forum, j'ai une résolution de 1600*1200 sur mon ordi et une plus petite sur mon portable et pourtant, la page ne "déborde" pas sur mon ordi portable :/ 
  • Commenter cette réponse |
Score
0
òh
òi
|
Pour le margin... bah tu l'applique une marge a la balise <p> dans ton css...

Pour pas que ta page déborde?! tout dépend des résolutions des visiteurs.
  • Commenter cette réponse |
Score
0
òh
òi
|
Je te remercie allstar, la couleur et la taille marche exactement comme je le souhaitait maintenant :) 
J'ai encore un petit soucis quant aux retours à la ligne, je ne comprends pas le principe de "margin" et n'arrive pas à l'incruster dans mon index.html :/ 
Et j'ai ENCORE un problème ><
Comment je peux faire en sorte que ma page ne "déborde" pas à droite? (Que je n'ai pas la barre de déplacement latéral en bas)
  • Commenter cette réponse |
Score
0
òh
òi
|
  1. <style type="text/css">
  2. p.sansserif {
  3. font-family: century gothic, sans-serif;
  4. color: #ffffff;
  5. font-size: 22px;
  6. }
  7. </style>
  • Commenter cette réponse |
Score
0
òh
òi
|
J'ai essayé, je m'y retrouve à peu près avec les codes séparés, mais dès qu'il faut en associer plusieurs en même temps, je suis perdu :s
  • Commenter cette réponse |
Score
0
òh
òi
|
J'ai finalement réussi à faire en sorte que mon texte apparaisse, je me retrouve avec ce code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head>
  3.  
  4.  
  5. <script></script>
  6.  
  7. <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Technix Graphist</title>
  8.  
  9.  
  10.  
  11. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head><body style="background-image: url(background1.jpg); height: 930px; width: 1600px; background-repeat: no-repeat;"><br>
  12.  
  13.  
  14. <span style="position: absolute; top: 450px; left: 400px;width: 300px; height: 200px">
  15. <A href="/piwigo/"><IMG src=boutongalerie.gif alt="Galerie" border=0 ></A>
  16. </span>
  17. <span style="position: absolute; top: 450px; left: 800px;width: 300px; height: 200px">
  18. <a href="mailto:Graphist51@laposte.net"><IMG src=boutoncontact.gif alt="Contact" border =0></a>
  19. </span>
  20. <link rel="icon" type="image/png" href="mafavicon.png" />
  21. <span style="position: absolute; top: 460px; left: 1125px">
  22. <style type="text/css">
  23. p.sansserif{font-family:century gothic,sans-serif;}
  24. </style>
  25.  
  26. <p class="sansserif">Pour me Contacter :
  27. Graphist51@hotmail.fr
  28. Ou Bien sur Infos du Net :
  29. Pseudo : juJu51</p>
  30.  
  31. </body>
  32. </html>


Seulement, maintenant, 4 problèmes se posent :
- Comment mettre mon texte en blanc?
- Comment le grossir?
- Comment faire des retours à la ligne? u_u
- Comment faire en sorte que la publicité "retourne" tout en haut de la page?

Voilà, si vous pouviez m'aider... Ou si quelqu'un aurait l'extrême gentillesse de me refaire la page en corrigeant ce qui ne va pas, ça serait vraiment sympa.
Sur ceux, je vous remercie à l'avance.
  • Commenter cette réponse |
Score
0
òh
òi
|
  1. # <p class="sansserif">Pour me Contacter :
  2. # *****@hotmail.fr
  3. # Ou Bien sur Infos du Net :
  4. # Pseudo : juJu51</p>


Mon texte est là. Que dois-je changer pour qu'il apparaisse??
  • Commenter cette réponse |
Score
0
òh
òi
|
En meme temps quand on regarde le code source y'a pas de texte...
Et ta balise body est fermé alors qu'il y a du code après et la balise html n'est pas fermé...

http://validator.w3.org/check?uri=http%3A%2F%2Ftechnixg...
  • Commenter cette réponse |
Score
0
òh
òi
|
Bah Non, je n'ai pas de texte, regarde à l'adresse http://technixgraphist.hebergratuit.com
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
fais voir un screenshot. Tu dois avoir genre du texte blanc sur fond blanc, ou une image au dessus du texte, ou ce genre de choses
  • Commenter cette réponse |
Score
0
òh
òi
|
Je n'ai pas de texte du tout.. ><
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Qu'est ce que tu veux dire par "ça ne marche pas" ?
Tu n'as pas ton texte ? Tu as ton texte mais pas dans la bonne police ? autre ?
  • Commenter cette réponse |
Score
0
òh
òi
|
Bah c'est celle que j'ai dans mon index.html et ça ne marche pas, enfin l'écriture...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
J'ai copié ton code et ça marche, la police est bien modifiée
  • Commenter cette réponse |
Score
0
òh
òi
|
Je te remercie et m'excuse pour le temps, mais j'avais trop de boulot et pas le temps de m'en occuper.
J'ai fais quelque chose mais ça ne donne rien sur mon site.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head>
  3.  
  4.  
  5. <script></script>
  6.  
  7. <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Technix Graphist</title>
  8.  
  9.  
  10.  
  11. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head><body style="background-image: url(background1.jpg); height: 930px; width: 1600px; background-repeat: no-repeat;"><br>
  12.  
  13.  
  14. <span style="position: absolute; top: 450px; left: 400px;width: 300px; height: 200px">
  15. <A href="/piwigo/"><IMG src=boutongalerie.gif alt="Galerie" border=0 ></A>
  16. </span>
  17. <span style="position: absolute; top: 450px; left: 800px;width: 300px; height: 200px">
  18. <a href="mailto:***@laposte.net"><IMG src=boutoncontact.gif alt="Contact" border =0></a>
  19. </span>
  20. <link rel="icon" type="image/png" href="mafavicon.png" />
  21. <span style="position: absolute; top: 460px; left: 1125px">
  22. </body>
  23. <style type="text/css">
  24. p.sansserif{font-family:century gothic,sans-serif;}
  25. </style>
  26.  
  27. <body>
  28. <p class="sansserif">Pour me Contacter :
  29. *****@hotmail.fr
  30. Ou Bien sur Infos du Net :
  31. Pseudo : juJu51</p>
  32.  
  33. </body>


Voici le code de ma page d'index, et le texte qui est censé être : Pour me Contacter :
*****@hotmail.fr
Ou Bien sur Infos du Net :
Pseudo : juJu51
ne s'affiche pas :/ 
Qu'est ce qui ne va pas? Quelle code dois-je rajouter pour pouvoir modifier la taille et la couleur de la police?
Je vous remercie à l'avance.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
En utilisant font-family
  • Commenter cette réponse |
Score
0
òh
òi
|
Ehh bah disons, avec une police normale?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Tu peux changer de police en CSS aussi en spécifiant "font".
Le soucis est que la police ne sera affichée que si elle est disponible sur le PC de la personne, donc si tu prends une police exotique, tu seras le seul à la voir.
Il y a d'autres méthodes, mais je ne sais pas si elles sont compatibles avec tous les navigateurs.
On en a parlé récemment ici : http://www.infos-du-net.com/forum/276594-21-police-cara...
  • Commenter cette réponse |
Score
0
òh
òi
|
Je te remercie, c'est ce que je recherchais.
Maintenant, si quelqu'un veut bien me coder un petit texte avec une police "X" à partir de mon index.html ça serait vraiment sympa, car mon texte est pour l'instant en image de fond, donc non sélectionnable etc...
Merci d'avance.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
  1. </head><body style="background-image: url(background1.jpg); height: 934px; width: 1618px; background-repeat: no-repeat;"><br>
  • Commenter cette réponse |
Score
0
òh
òi
|
J'ai ça :
  1. </head><body style="background-image: url(background1.jpg); height: 934px; width: 1618px;"><br>


Où dois-je le mettre exactement? Il ne faut pas que je rajoutes des guillemets ou autre??
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Dans ton style qui définit le background (sur ton élément body ici).
Et tu peux essayer le GIF sinon. Vu que tu n'as pas beaucoup de couleurs, en réduisant la palette, tu dois pouvoir gagner un peu
  • Commenter cette réponse |
Score
0
òh
òi
|
D'accord, je vais essayer de réduire la taille de l'image.
Euh, si vous connaissez un format bien, je suis preneur!
Je le mets où le code "background-repeat: no-repeat" ??
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Une image qui fait 1Mo c'est long à charger... (enfin tout dépend de la connexion) c'est pour ça qu'elle ne s'affiche pas forcément partout, c'est seulement le temps de la charger qui est long.
Et si tu ne veux pas qu'elle se répète tu mets background-repeat: no-repeat
  • Commenter cette réponse |
Score
0
òh
òi
|
Mais seulement, lorsque l'image est trop petite, elle se "répète" à droite...
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonjour,

la taille de ton background 1618*934px

Normal que si quelqu'un arrive avec une résolution de 800*600 (ca existe encore) l'image soit décaler...
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS