High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

[xHTML] mettre 1 image de fond

Dernière réponse le 8 déc 2008 à 03:39:52 letsfire_89, le 20 nov 2008 à 12:00:33 
 Signaler ce message aux modérateurs

Bonjour,

Je suis un pauvre étudiant en première année de licence qui apprend à programmer en xHTML.

J'aimerais savoir comment on fait pour mettre une image de fond en plein écran sur ma page en passant par le fichier ".CSS".

Il faudrait que par exemple, pour une image relativement moyenne, elle puisse s'adapter à la résolution de l'écran de la personne qui navigue sur la page en question.

J'aimerais que l'image soit parfaitement ADAPTEE à toute la page. Il ne faut pas qu'elle dépasse de l'écran, ni qu'il y ai de marges.

Et bien sûr, tout celà doit être une manip. passable au validateur W3C (http://jigsaw.w3.org/css-validator/#validate_by_upload).

Je vous remercie!

ps: je me fiche que la déformation de l'image puisse nuire à sa qualité

Configuration: Windows Vista
Internet Explorer 7.0

Meilleures réponses pour « [xHTML] mettre 1 image de fond » dans :
[Word] Image de fond VoirIl est possible sous Microsoft Word d'afficher une image en arrière-plan dans un document en cliquant sur le menu Format, puis sur Arrière-Plan et enfin sur Motifs et textures. Dans l'onglet Image, cliquer sur le bouton "Sélectionner une image"....
Créer une texture répétable (tileable) VoirUne image répétable (tileable en anglais) est utile par exemple pour faire le fond d'une page web ou pour habiller les objets 3D en image de synthèse. Souvent, on trouve de belles photographies, mais elle sont rarement utilisables telles quelles...
[CCM] Insérer une image dans une discussion VoirLes forums de CCM ne contiennent volontairement pas la possibilité d'insérer des images dans les messages afin de garder une certaine cohérence aux forums. Cependant, il vous est possible de montrer des images ou des captures d'écran en...
Posez votre question Répondre

1

Aleanar, le 20 nov 2008 à 14:13:38
  • +2

Il me semble qu'il faudrait utiliser le javascript car le css ne peut faire cela.

   
Répondre à Aleanar

2

letsfire_89, le 21 nov 2008 à 11:45:22

Alors s'il faut passer par le javascript, quelles sont les lignes nécessaires?

   
Répondre à letsfire_89

3

letsfire_89, le 21 nov 2008 à 12:36:40

J'ai trouvé sur un autre topic similaire ceci: 

<html> 
<BODY> 
  <img src="CheminRelatifDeImage" name="NomDeImage" width="100%" height="100%">
</BODY> 
<HTML>


Ca marche!

Mais le problème, ça marche bien dans le fichier HTML mais je n'ai pas réussi à transcrire ces lignes dans le ".CSS"!

Car bien que cette ligne marche, elle ne permet pas de passer la validation xHTML strict au validateur W3C (http://validator.w3.org/check).

Comment faire?

   
Répondre à letsfire_89

4

Fricky42, le 21 nov 2008 à 13:05:53

<html> 
<BODY> 
  <img src="CheminRelatifDeImage" name="NomDeImage" class='toto'>
</BODY> 
<HTML>


et dans le .css : 

.toto {
width:100%;
height:100%;
}


ne marche pas ?

Bref. Pourquoi veux tu faire cela ? tu sais les resolutions de nos jours varient enormement, et a moins d'avoir une image svg le redimensionnement peux rendre le fond super moche oO.
Le "lol" est aux boulets ce que le ";" est aux programmeurs
b2eda605511811988d04704ed7e809a4

   
Répondre à Fricky42

6

letsfire_89, le 21 nov 2008 à 16:58:15

Merci d'avoir répondu Fricky42 mais 

  <img src="CheminRelatifDeImage" name="NomDeImage" class='toto'>

ne passe pas au validateur W3C, bien que techniquement ton truc marche.

Je rappel que suis à la FAC et que chacune de nos pages doit être validée par ce bidule: http://validator.w3.org/check

   
Répondre à letsfire_89

5

xxkirastarothxx, le 21 nov 2008 à 13:15:45

Le problème de cette methode c'est que ton img est concidéré comme un block, tout ce que tu affichera serra afficher sous l'image, et non pas sur l'image.
Pour palier a ce problème, tu rajoute position:absolute; dans le css ;)

En css complet, il y a une solution me semble il (avec le background-images, bien à l'ancienne ^^), je vais voir.
† Quel est le plus grand mal de l'humanité, L'ignorance ou l­'indifférence ? †
† A vrai dire... J'en sais rien, et j'm'en fou ... †

   
Répondre à xxkirastarothxx

7

letsfire_89, le 21 nov 2008 à 17:01:01

xxkirastarothxx , j'attend ta solution avec impatience, car dans mon groupe à la FAC, on est bien nombreux à se poser la question pour que le background-image se mette en plein écran tout en restant VALIDE!

   
Répondre à letsfire_89

8

xxkirastarothxx, le 21 nov 2008 à 21:59:16

Bien déjà, pour commencer, je dirais qu'en règles général, peut être mise à part sur un site web interne sur un réseaux Giga-Ethernet, il est déconseillé de mettre une image de cette taille en background, si c'est sur le net, tu imagine:
1] le temps de chargement des pauvres gens qui vont devoir lire ton image
2] la rapidité avec laquelle ta bande passante risque d'être saturé.

Donc même en restant valide, ça poserais des problèmes d'utilisations.
Pour la sobriété du site, comme pour sa rapidité d'utilisation, on préfère utilise des petit bout d'image que l'on répète, bien plus légé.

Bref, dans tout les cas je n'ai pas retrouvé la solution pour étendre une image à 100% sur la balise background-image css, il me semblais l'avoir déjà utilisé, mais... envolé.
je ne vois que la solution que nous t'avons donné pour le moment:

une balise <img /> dans le html, et un css qui défini cette image en position absolue, avec les width et height a 100%
Pas mieux, désolé :s
† Quel est le plus grand mal de l'humanité, L'ignorance ou l'indifférence ? †
† A vrai dire... J'en sais rien, et j'm'en fou ... †

   
Répondre à xxkirastarothxx

9

Fillazer, le 22 nov 2008 à 06:48:28

Voila le code! :D

Page
<html>
<head>
<style type="text/css">
.toto {
marge: auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<img src="CheminRelatifDeImage" class='toto' alt="Moi et mon ami" />
</body>
<html>

Voila! Valide Xhtml. :P

   
Répondre à Fillazer

10

letsfire_89, le 25 nov 2008 à 13:46:36
  • +1

Je suis désolé Fillazer,
mais ton truc n'est pas valide sur http://validator.w3.org/check
Je voudrais du xHTML strict!

Voici la page invalide: 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
     <title></title>
	     <link rel="stylesheet" type="text/css" href="imagepartout.css" />
		 
      <style type="text/css"> 
         .toto { 
         marge: auto; 
         width: 100%; 
         height: 100%; 
         } 
      </style> 

</head>

     <body>
	 
	     <img src="image.jpg" class='toto' alt="Moi et mon ami" /> 
	 
         <p> 
                 blablabla
         </p>

     </body>  
   
</html>


Aussi je ne comprend pas le "Mon ami et moi"... je dois le remplacer par quoi?

Merci!

   
Répondre à letsfire_89

11

Fillazer, le 27 nov 2008 à 07:36:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="imagepartout.css" />
		<style type="text/css">
		.toto { 
			marge: auto; 
			width: 100%; 
			height: 100%; 
			} 
		</style>
	</head>
	<body>
		<img src="image.jpg" class='toto' alt="Moi et mon ami" />
	</body>
</html>


L'attribut "alt" dans la balise image sert surtout pour le référencement de celle-ci. Si l'on tape alors "Moi et mon ami" dans Google, alors on va tomber dessus, mais moi je le mets pour passer la validation... tout simplement.

Et pour le meta-tag (<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />) situé en haut du code, il sert à informer au navigateur qu'elle type de caractère il doit utilisé. UTF-8 est assez universel, donc recommandé.

Si besoin d'aide, j'suis pas loin.

   
Répondre à Fillazer

12

letsfire_89, le 27 nov 2008 à 12:09:41

Sur http://validator.w3.org/check, avec ta page HTML j'obtient:

This document was successfully checked as XHTML 1.0 Transitional!

Moi je veux:

This document was successfully checked as XHTML 1.0 Strict!

Une solution?

   
Répondre à letsfire_89

13

Fillazer, le 6 déc 2008 à 18:27:29
  • +1

Moi qui adore le Strict! :P 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="imagepartout.css" />
    <style type="text/css">
    .toto { 
    marge: auto; 
    width: 100%; 
    height: 100%; 
    } 
    </style>
  </head>
  <body>

   <div style="margin: auto;">
   <img src="image.jpg" class='toto' alt="Moi et mon ami" />
   </div>
  
  </body>
</html>

   
Répondre à Fillazer

14

letsfire_89, le 6 déc 2008 à 21:09:12

Oh merci Fillazer!
Ca marche!

J'ai envie de placer "background-attachement: fixe;" ainsi que de placer du texte sur mon image c'est possible?

Merci!

   
Répondre à letsfire_89

15

 Fillazer, le 8 déc 2008 à 03:39:52

Tout ou presque est possible sauf dans ton cas, car je t'ai donné la solution pour l'image... mais en principe... si tu veux mettre du texte sur une image, l'image devient donc le background d'un conteneur.. mais malheureusement dans ton cas, le background ne pourra pas s'adapter à la résolution de l'écran sans passer par le mode repeat.

   
Répondre à Fillazer
Posez votre question Répondre
Ils ont besoin de votre aide