[xHTML] mettre 1 image de fond
letsfire_89
Messages postés
256
Date d'inscription
Statut
Membre
Dernière intervention
-
Fillazer Messages postés 240 Date d'inscription Statut Membre Dernière intervention -
Fillazer Messages postés 240 Date d'inscription Statut Membre Dernière intervention -
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é
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
- Comment mettre une vidéo en fond d'écran - Guide
- Image iso - Guide
- Enlever le fond d'une image - Guide
- Mettre une image en fond sur word sur une seule page - Guide
- Fond de page word - Guide
9 réponses
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>
J'ai trouvé sur un autre topic similaire ceci:
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?
<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?
<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.
Merci d'avoir répondu Fricky42 mais
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
<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
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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
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
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:
Aussi je ne comprend pas le "Mon ami et moi"... je dois le remplacer par quoi?
Merci!
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!
<!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.
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?
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?
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!
Ca marche!
J'ai envie de placer "background-attachement: fixe;" ainsi que de placer du texte sur mon image c'est possible?
Merci!
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.