[xHTML] mettre 1 image de fond

Fermé

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 - 20 nov. 2008 à 12:00
Fillazer Messages postés 240 Date d'inscription vendredi 22 février 2008 Statut Membre Dernière intervention 20 janvier 2024 - 8 déc. 2008 à 03:39

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é

A voir également:

[xHTML] mettre 1 image de fond
Image iso - Guide
Comment mettre une vidéo en fond d'écran - Guide
Acronis true image - Télécharger - Sauvegarde
Image libre de droit gratuite google - Guide
Trame de fond word - Guide

9 réponses

Réponse 1 / 9

Fillazer Messages postés 240 Date d'inscription vendredi 22 février 2008 Statut Membre Dernière intervention 20 janvier 2024 9
6 déc. 2008 à 18:27

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éponse 2 / 9

Aleanar Messages postés 27 Date d'inscription lundi 2 avril 2007 Statut Membre Dernière intervention 13 mai 2009 1
20 nov. 2008 à 14:13

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

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261
21 nov. 2008 à 11:45

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

Réponse 3 / 9

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261
21 nov. 2008 à 12:36

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?

Fricky42 Messages postés 466 Date d'inscription lundi 15 septembre 2008 Statut Membre Dernière intervention 27 mars 2012 182
21 nov. 2008 à 13:05

<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.

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261 > Fricky42 Messages postés 466 Date d'inscription lundi 15 septembre 2008 Statut Membre Dernière intervention 27 mars 2012
21 nov. 2008 à 16:58

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éponse 4 / 9

xxkirastarothxx Messages postés 380 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 22 mars 2013 40
21 nov. 2008 à 13:15

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.

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261
21 nov. 2008 à 17: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!

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

xxkirastarothxx Messages postés 380 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 22 mars 2013 40
21 nov. 2008 à 21:59

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

Réponse 6 / 9

Fillazer Messages postés 240 Date d'inscription vendredi 22 février 2008 Statut Membre Dernière intervention 20 janvier 2024 9
22 nov. 2008 à 06:48

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

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261
25 nov. 2008 à 13:46

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éponse 7 / 9

Fillazer Messages postés 240 Date d'inscription vendredi 22 février 2008 Statut Membre Dernière intervention 20 janvier 2024 9
27 nov. 2008 à 07:36

<!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.

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261
27 nov. 2008 à 12:09

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éponse 8 / 9

letsfire_89 Messages postés 256 Date d'inscription mardi 7 novembre 2006 Statut Membre Dernière intervention 14 avril 2018 261
6 déc. 2008 à 21:09

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éponse 9 / 9

Fillazer Messages postés 240 Date d'inscription vendredi 22 février 2008 Statut Membre Dernière intervention 20 janvier 2024 9
8 déc. 2008 à 03:39

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.

Discussions similaires

Comment enlever le rouge sur la photo svp ?

PIX

problème de pixel

Résolution d'une image 500 pixels largeur

Dechiffrer une image caché