Image fond de page html
Résolu/Fermé
A voir également:
- Image fond de page html
- Supprimer une page word - Guide
- Image iso - Guide
- Page d'accueil iphone - Guide
- Fond de page word - Guide
- Traduire une page web - Guide
19 réponses
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
Modifié par AssassinTourist le 23/01/2012 à 16:54
Modifié par AssassinTourist le 23/01/2012 à 16:54
Bonjour,
Essaye cette solution : https://www.reussir-mon-ecommerce.fr/
Peut-être que ça t'aidera plus : https://forums.commentcamarche.net/forum/affich-8661158-html-css-z-index
Essaye cette solution : https://www.reussir-mon-ecommerce.fr/
Peut-être que ça t'aidera plus : https://forums.commentcamarche.net/forum/affich-8661158-html-css-z-index
j'ai du faire une mauvaisie manip car ça ne marche pas chez moi .. ça me fait une image plus grande bien plus grande mais pas un vrai fond d'écran ...
je réessaie je suis nulle ..
merci ;)
je réessaie je suis nulle ..
merci ;)
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
24 janv. 2012 à 14:36
24 janv. 2012 à 14:36
Quelle solution as-tu testé ?
Sinon, qu'entends-tu par "pas un vrai fond d'écran" ?
Sinon, qu'entends-tu par "pas un vrai fond d'écran" ?
les 2 j'y comprends rien ....
j'ai trouvé ça aussi sur le net le gars explique très bien
http://www.365-jours.fr/regarder/episode/186
mais ça ne marche pas quand même pas quand même chez moi c
je vais devenir fou là !!
j'ai mis ça comme code css
body
{
background-image: url(chat2.gif); background-repeat:no-repeat; background-size: cover; background-attachment:fixed;
}
je ne vois pas d'erreur dans mon code !! mon image est toujours au en haut à gauche et pas tout écran ! je vais devenir dingue là !!
ou alors c'est parce que c'est un gif ?? c'est possible ça ??
j'ai trouvé ça aussi sur le net le gars explique très bien
http://www.365-jours.fr/regarder/episode/186
mais ça ne marche pas quand même pas quand même chez moi c
je vais devenir fou là !!
j'ai mis ça comme code css
body
{
background-image: url(chat2.gif); background-repeat:no-repeat; background-size: cover; background-attachment:fixed;
}
je ne vois pas d'erreur dans mon code !! mon image est toujours au en haut à gauche et pas tout écran ! je vais devenir dingue là !!
ou alors c'est parce que c'est un gif ?? c'est possible ça ??
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
24 janv. 2012 à 15:39
24 janv. 2012 à 15:39
Bon lien, ça m'a permis d'apprendre un truc.
Sauf qu'il s'agit d'une propriété de css3, qui est prise en compte à partir de ie8 (ou ie9) et j'ai vu que ta configuration indiquais que tu étais en ie7, donc ça ne marchera pas.
Soit tu mets à jour ton navigateur, soit tu fais mes solutions plus compliquées, mais qui marchent partout =)
Sauf qu'il s'agit d'une propriété de css3, qui est prise en compte à partir de ie8 (ou ie9) et j'ai vu que ta configuration indiquais que tu étais en ie7, donc ça ne marchera pas.
Soit tu mets à jour ton navigateur, soit tu fais mes solutions plus compliquées, mais qui marchent partout =)
même
body
{
background-image: url(chat2.gif); background-repeat:no-repeat; background-size: cover;
}
tout seul ça me laisse l'image en haut à gauche !! pff
je vais devenir dingue je te dis !!
body
{
background-image: url(chat2.gif); background-repeat:no-repeat; background-size: cover;
}
tout seul ça me laisse l'image en haut à gauche !! pff
je vais devenir dingue je te dis !!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
parce que le gars on voit quand il fait sa modif ça prend bien tout l'écran moi rien !
si tu vois une erreur dans mon code dis le moi
moi à part le fait que ce soit un gif je comprpens pas autrement
si tu vois une erreur dans mon code dis le moi
moi à part le fait que ce soit un gif je comprpens pas autrement
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
Modifié par Melooo le 24/01/2012 à 15:34
Modifié par Melooo le 24/01/2012 à 15:34
essayes de mettre :
Mais attention si tu met une image de 640x520, le rendu sera très mauvais sur un écran haute définition
width:100%;
Mais attention si tu met une image de 640x520, le rendu sera très mauvais sur un écran haute définition
Assassin tourist j'avais pas vu ton com
mince !! c'est donc pour ça !! et bien me voilà bien avancé !!!
en tout cas tu as vu le gard il a fait un super tuto de vidéos !! je trouve excellent !!
Meloo je le mets où excatement ce code car je débute ?? tu peux m'expliquer ?
Merci
mince !! c'est donc pour ça !! et bien me voilà bien avancé !!!
en tout cas tu as vu le gard il a fait un super tuto de vidéos !! je trouve excellent !!
Meloo je le mets où excatement ce code car je débute ?? tu peux m'expliquer ?
Merci
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
24 janv. 2012 à 16:09
24 janv. 2012 à 16:09
Tu le met la ou tu as ton image de background, c'est à dire dans le css --> body
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
24 janv. 2012 à 16:18
24 janv. 2012 à 16:18
Non background-size est mal utilisé :
essayes les deux codes et tiens nous au courant
-webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%;
essayes les deux codes et tiens nous au courant
je t'avoue que là je n'y comprends encore plus rien ! je mets les tiré aussi ?
jev ais essayer !!merci
jev ais essayer !!merci
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
24 janv. 2012 à 16:55
24 janv. 2012 à 16:55
Oui, les tirets aussi. Tout ça dans ton css. C'est une astuce pour du css customisé avant le css3.
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
24 janv. 2012 à 16:56
24 janv. 2012 à 16:56
background-size est du CSS3 donc tu dois l'adapter pour tout les navigateurs
-webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
-moz- pour Firefox 3.6, et suivants,
-ms- pour IE 10 et suivants,
-o- pour Opera 11.10, et suivants.
-webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
-moz- pour Firefox 3.6, et suivants,
-ms- pour IE 10 et suivants,
-o- pour Opera 11.10, et suivants.
là je n'y comprends plus rien du tout et y a plus rien qui marche
avant juste en html on pouvait le faire non ??
pouvez vous me donner une astuce avec en html <BODY BACKGROUND=""> pour que ça prenne tout l'écran et que ça ne se répète pas ...
car avec l'autre c'est tout petit meme avec un fond de page téléchargé exprès !!
merci de m'aider avec l'html car là je m'embrouille
avant juste en html on pouvait le faire non ??
pouvez vous me donner une astuce avec en html <BODY BACKGROUND=""> pour que ça prenne tout l'écran et que ça ne se répète pas ...
car avec l'autre c'est tout petit meme avec un fond de page téléchargé exprès !!
merci de m'aider avec l'html car là je m'embrouille
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
25 janv. 2012 à 16:37
25 janv. 2012 à 16:37
Non, on ne peut pas faire autrement.
Ce qu'on t'a donné ne marche pas ? Qu'est-ce que tu n'as pas compris ? Qu'est-ce que tu as fait au final ?
Les fonds de page qu'on télécharge sont de plus en plus pas assez grand pour les écrans d'aujourd'hui. Tu ne peux pas t'y fier.
Ce qu'on t'a donné ne marche pas ? Qu'est-ce que tu n'as pas compris ? Qu'est-ce que tu as fait au final ?
Les fonds de page qu'on télécharge sont de plus en plus pas assez grand pour les écrans d'aujourd'hui. Tu ne peux pas t'y fier.
c'est ce qui a été rajouté par Melooo
===>
Melooo - 24 janv. 2012 à 16:56
background-size est du CSS3 donc tu dois l'adapter pour tout les navigateurs
-webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
-moz- pour Firefox 3.6, et suivants,
-ms- pour IE 10 et suivants,
-o- pour Opera 11.10, et suivants.
je dois mettre ça aussi ? mets où ?? y ap as de point virgules .. j'y comprends plus rien lol
pardon ceci est un vrai casse tête pour moi !!
si je fais avec la méthode la vidéo que j'ai mise qui me parait très simple qq qui n'a pas fait sa mise à jour IE ne verra pas le fond d'écran où il faut ??? non ??
===>
Melooo - 24 janv. 2012 à 16:56
background-size est du CSS3 donc tu dois l'adapter pour tout les navigateurs
-webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
-moz- pour Firefox 3.6, et suivants,
-ms- pour IE 10 et suivants,
-o- pour Opera 11.10, et suivants.
je dois mettre ça aussi ? mets où ?? y ap as de point virgules .. j'y comprends plus rien lol
pardon ceci est un vrai casse tête pour moi !!
si je fais avec la méthode la vidéo que j'ai mise qui me parait très simple qq qui n'a pas fait sa mise à jour IE ne verra pas le fond d'écran où il faut ??? non ??
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
Modifié par AssassinTourist le 25/01/2012 à 17:27
Modifié par AssassinTourist le 25/01/2012 à 17:27
(Meloo explicitait le code qu'elle t'avait fourni avant ;p)
body
{
background-image: url(chat2.gif);
background-repeat:no-repeat;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
Les gens qui n'ont pas mis à jour leur navigateur (dont toi si j'ai bien compris) ne verraient pas l'effet voulu avec la méthode de la vidéo.
body
{
background-image: url(chat2.gif);
background-repeat:no-repeat;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
Les gens qui n'ont pas mis à jour leur navigateur (dont toi si j'ai bien compris) ne verraient pas l'effet voulu avec la méthode de la vidéo.
purée mais ça ne marche toujours pas !!! l'image est toujours en haut à gauche !!
ça vient de quoi ??
je vais devenir folle là !!lol
ça viendrait aussi tu navigateur ?? si c'est le cas je fais la mise à jour mais n'importe qui qui verrai le site avec une ancienne version va le voir en haut à gauche donc c'est complètement pourri !!ouiiiiiiiiin
et si je taillais mon image grandeur écran??
ça combien un écran le plus grand qu'on peut trouver ?? je suis désespérée là !!
ça vient de quoi ??
je vais devenir folle là !!lol
ça viendrait aussi tu navigateur ?? si c'est le cas je fais la mise à jour mais n'importe qui qui verrai le site avec une ancienne version va le voir en haut à gauche donc c'est complètement pourri !!ouiiiiiiiiin
et si je taillais mon image grandeur écran??
ça combien un écran le plus grand qu'on peut trouver ?? je suis désespérée là !!
je viens de vérifier en ouvrant mon image elle a exactement la même taille que sur ma page web quand je double clique dessus !!
j'ai réessayé la première méthode donné http://www.commentcamarche.net/forum/affich-8661158-html-css-z-index
ça prend bien tout l'écran là mais le texte passe en dessous avec ce code
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<title>Accueil</title>
<link rel="stylesheet" href="CSS style2.css" type="text/css" />
</head>
<body>
<img id="fond" src="chat2.gif" width="100%">
<a href="index.php"><p id="lien">ACCES INTRANET</p></a>
</body>
</html>
et css
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
text-align:center;
font-weight: bold;
}
#fond {
height: 100%;
width: 100%;
}
#lien {
margin-top:-18%;
margin-left:45%;
font-size:200%;
color:white;
}
a {
text-decoration: none;
}
y a-t-il une erreur ??moi je veux fond de page qu'on puisse mettre les bloc dedans etc...merci
ça prend bien tout l'écran là mais le texte passe en dessous avec ce code
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<title>Accueil</title>
<link rel="stylesheet" href="CSS style2.css" type="text/css" />
</head>
<body>
<img id="fond" src="chat2.gif" width="100%">
<a href="index.php"><p id="lien">ACCES INTRANET</p></a>
</body>
</html>
et css
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
text-align:center;
font-weight: bold;
}
#fond {
height: 100%;
width: 100%;
}
#lien {
margin-top:-18%;
margin-left:45%;
font-size:200%;
color:white;
}
a {
text-decoration: none;
}
y a-t-il une erreur ??moi je veux fond de page qu'on puisse mettre les bloc dedans etc...merci
je remonte le post car je ne sais pas si vous avez vu mon dernier message ? merci
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
26 janv. 2012 à 09:27
26 janv. 2012 à 09:27
Montre nous le code que tu avais quand nous t'avons donnée le code, parce que si on te le donne le code c'est pas pour rien (et dans le code que je vois la c'est pas du tout sa) ;)
ça c'est les codes qui étaient sur le premier lien donné en haut
http://www.commentcamarche.net/forum/affich-8661158-html-css-z-index
donc c'est vous sans être vous qui me l'avez donné ;) c'était la méthode
ça marche mais le texte est en dessous !!
http://www.commentcamarche.net/forum/affich-8661158-html-css-z-index
donc c'est vous sans être vous qui me l'avez donné ;) c'était la méthode
ça marche mais le texte est en dessous !!
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
Modifié par AssassinTourist le 26/01/2012 à 14:15
Modifié par AssassinTourist le 26/01/2012 à 14:15
Alors la solution de Meloo, l'image s'adapte au body, mais le body s'adapte à ce que tu as à l'intérieur du body. Donc s'il n'y a pas beaucoup de texte, le body sera petit.
Et j'ai testé le code que je t'ai donné au début et ça marche... Tu as sûrement oublié de changer le lien vers ton css (et le mieux c'est sans espace)
Et j'ai testé le code que je t'ai donné au début et ça marche... Tu as sûrement oublié de changer le lien vers ton css (et le mieux c'est sans espace)
AssassinTourist quand tu parles du codes que tu m'as donné au début tu parles bien du lien que je t'ai donné dans mon message précédent !!
le code css je l'ai changé si tu regardes je l'ai appelé CSS style2.css
si tu vois une autre erreur ou si c'est pas de ce code dont tu me parles remets le moi stp
et encore dsl pour tout ce bazar .. merci pour tout
le code css je l'ai changé si tu regardes je l'ai appelé CSS style2.css
si tu vois une autre erreur ou si c'est pas de ce code dont tu me parles remets le moi stp
et encore dsl pour tout ce bazar .. merci pour tout
oups pardon effectivement tu as raison j'ai du faire une erreur .. j'essaie tout à l'heure en fait je l'avais appelé style2.css et là j'avais mis CSS Style2.css donc ça doit être pour ça !! je te tiens au courant !! merci merci merci j'espère que ça marchera là ;)
je suis une tarte !!! lol
je suis une tarte !!! lol
yes merci AssassinTourist !! ça marche !!
par contre maintenant j'ai un autre soucis .. je ne vais pas y arriver lol
l'image est un peu ratatinée ... On peut rien faire pour ça ?? en lareur ça va mais en hauteur on voit qu'elle est ratatinée un peu ... :(( pffff quelle joie l'informatique lol
merci
par contre maintenant j'ai un autre soucis .. je ne vais pas y arriver lol
l'image est un peu ratatinée ... On peut rien faire pour ça ?? en lareur ça va mais en hauteur on voit qu'elle est ratatinée un peu ... :(( pffff quelle joie l'informatique lol
merci
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
27 janv. 2012 à 10:45
27 janv. 2012 à 10:45
L'image s'adapte à l'écran. Si tu ne veux pas que ce soit ratatiné, il faut que l'image de base soit proportionnelle à la taille de l'écran.
