HTML - Fond dégradé
M0nk
-
Fallentree Messages postés 2445 Statut Membre -
Fallentree Messages postés 2445 Statut Membre -
Bonjour,
Je ne maitrise pas encore le développement web, c'est la raison pour laquelle je viens chercher de l'aide ici.
Je souhaiterais savoir comment réalisé un fond de couleur dégradé sur toutes les pages de mon site ?
J'ai essayé la procédure ou il faut créer une image de 1pixel de large sur environ 1500. Mais je n'arrive pas à la mettre en application.
Merci pour votre attention.
Je ne maitrise pas encore le développement web, c'est la raison pour laquelle je viens chercher de l'aide ici.
Je souhaiterais savoir comment réalisé un fond de couleur dégradé sur toutes les pages de mon site ?
J'ai essayé la procédure ou il faut créer une image de 1pixel de large sur environ 1500. Mais je n'arrive pas à la mettre en application.
Merci pour votre attention.
8 réponses
-
Salut,
Il est possible de faire un dégradé en arrière-plan sans image et sans JS, grâce au CSS3.
Voici un générateur :
https://www.colorzilla.com/gradient-editor/ -
salut
c'est tout simple, tu indique dans body ton image de fond
body {
background-image: url(fond.gif);
}
Voilà le code :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
background-image: url(fond.gif);
}
-->
</style></head>
<body>
</body>
</html>
Tu mets ton image de fond à la racine de ton site, ici l'image s'appelle " fond.gif ".
Ce qui est encore mieux ensuite est de faire un fichier css contenant ton " body " et ensuite tu fais appel à ce css dans chacune de tes pages, comme cela si un jour le fond ne te plais plus, tu auras juste à changer dans le css et non dans toutes tes pages. -
Bonne idée...
Tu veux faire une image ou un script java qui t affiche un degradé ? -
Tu crée un CSS et tu l'enregistres à la racine de ton site " fond.css.
Dans ce css, tu colles cela :
/* CSS Document */
body {
background-image: url(fond.gif);
}
et dans ta page html, tu fais appel à ce css :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="fond.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Ton fond s'affichera dans ta page. -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Merci a tous, je ne maîtrise pas mais je connais un peu quand même j'ai un BTS Analyste Développeur ^^.
J'utilise déjà un fichier que j'ai nommé "style.css".
Je connais la solution de l'image de fond mais j'aurais souhaité savoir s'il n'existait pas du code plutôt qu'une image ? Genre :
body {
background-color: #FFFFFF, #RRVVBB;
}
Sinon, je vais m'en tenir à ça.
Juste une chose, je dois créer une image en dégradé de quelle taille (en pixel) ? (mon site est en "width=970")
Merci à vous.-
-
voila un exemple de creation avec des divs:
<script language="Javascript"> nbcouleur=250; document.write ('<div style="width:300px;height:520px;overflow:auto;border:1px solid black;" >'); document.write ('<TABLE style="margin:10px 10px 10px 10px;" height=150px border=0 cellspacing=0 cellpadding=0"><TR valign=bottom>'); for (i=0;i<nbcouleur;i++) { document.write('<TD >'+ '<div style="width:280px;height:2px;background-color:rgb('+(50)+','+i+','+(30+i)+')"></div>'+ '</td></tr>'); }; document.write ('</table></div>'); </script> -
-
-
-
-
Merci Fallentree,
C'est ça ce que je recherche. J'ai commencé a l'interpréter a ma manière (ci-dessous) par contre je n'arrive pas à le centrer.
Également, comment doit je faire pour trouver mes couleurs ? (une sorte de beige). Parce que j'ai essayé de modifier plusieurs dizaine de fois mais je ne tombe jamais sur le beige.<script language="Javascript"> nbcouleur=250; /*document.write ('<div style="width:970;height:100%;overflow:auto;" >');*/ document.write ('<TABLE style="margin:10px 10px 10px 10px;" height=100% border=0 cellspacing=0 cellpadding=0"><TR valign=bottom>'); for (i=0;i<nbcouleur;i++) { document.write('<TD >'+ '<div style="width:970;height:100%;background-color:rgb('+(50)+','+i+','+(30+i)+')"></div>'+ '</td></tr>'); }; document.write ('</table></div>'); </script>-
-
pour le center, c est vrai que cela pose un probleme
essaie d'encapsuler le script dans une div deja centrer mais je ne suis pas sur que cela te convienne
autrement,il faut que tu geres l evenement onload du body
pour cela passes en position fixe et fais un getdocumentbyid('myid').top et .left avec les propriete de ta div de background et ta fenetre d affichage.
Probleme: cela n est pas implicitement comptatible avec tout les navigateurs.
N oublie pas le z-index de la propriete de style... -
-
-
-
-
<!DOCTYPE PUBLIC ... >? de quoi il s'agit ?
La couleur est trop orange jaune, il me faut plus un beige comme la couleur de référence, même si le dégradé est léger-
Le doctype indique les règles auxquelles tu soumets ton document.
Il existe plusieurs versions du HTML et du XHTML.
Dans le cas d'un document XML, tu peux également écrire tes propres règles grâce à un fichier DTD. -
-
si ton doc type est en strict, la redaction des liens est autre balise doit etre fermé de facon formel </...>. et les liens doivent etre absolus ...
Tandis que en transitional c est plus libre mais il peut il y avoir des probleme lors de l hebergement.
Par exemple, ca fonctionne en local mais lorsqu ils sont hebergés .
A ne rien y comprendre.
J espere avoir des complements d info dans le futur.
Merci d avance. -
-
Le doctype est obligatoire si tu veux que les navigateurs affichent ton site en respectant ton code.
L'usage du XHTML Strict n'oblige pas les liens absolus, et le XHTML Transitional ainsi que toute version du HTML ne peut pas être la source de problème lors de l'hébergement. Si les chemins relatifs sont correctement écrits, il n'y aura aucun problème.
À ce jour, je te conseille ou bien le XHTML 1.0 Strict, ou bien le HTML5.
Tout d'abord, les différences entre le XHTML et le HTML : le XHTML est basé sur les règles du XML. L'écriture du code est donc plus stricte :
- Toutes les balises doivent être fermées
Il y a les balises qui fonctionnent par paire (<a ...>...</a>, <span ...>...</span>, etc)
Et les balises qui sont seules : <img .../>, <link .../> <input ... /> etc.
- Les attributs doivent avoir une valeur entre guillemets.
Ceci est interdit : <input type="text" disabled />
Ainsi que ceci : <input type="text" disabled=disabled />
Mais ceci est correct : <input type="text" disabled="disabled" />
- Pas de majuscules dans les noms de balises et attributs
- Pour en savoir plus : https://www.la-grange.net/w3c/xhtml1/#diffs
Tu utilise donc le HTML 4.01 ou le XHTML 1.0
Il existe aussi le XHTML 1.1 (obligatoirement Strict), mais il est très peu utilisé.
Il y a également le HTML5 qui commence a être bien répandu.
Il existe également des variantes en XHTML 1.0 et HTML 4.01.
Je te recommande la version Strict.
Si tu utilises encore des balises ou attributs obsolètes (font, iframe, center, basefont, ...), alors tu peux utiliser la variante Transitional.
Si tu as besoin des frame (à ne pas confondre avec iframe) ou des frameset, alors la DTD Frameset et faite pour ça.
Même si les variantes Transitional et le Frameset autorisent les iframe, frame et frameset, ça ne permet que d'obtenir un code valide sans en retirer les désavantages : mauvais référencement, mauvaises accessibilité, etc.
-
-
J'ai regardé le CSS3, depuis le lien de avion-f16 mais je n'ai pas compris comment fonctionnait le code en sortie.
Jolie travail Fallentree,
Les couleurs me conviennent parfaitement. De plus tu as réussi à me le centrer.
Maintenant j'aimerais que tu termines de m'aider si tu as le temps, comment fusionner ma page (mon script php) avec cette page de fond dégradé ?
Merci ;)-
-
-
pourquoi tu enregistre pas l image avec une copie d ecran ???
C est plus simple pour toi.
Sinon il faut que tu passes z-index=-1 dans le style de la div qui centre le fond. ainsi elle sera toujours en arriere plan.
Probleme c est que ton image de fond a une dimension fixe et là ça possera toujours un probleme lors du redimensionnement.
Y a toujours la solution de calculer les hauteurs de 'degradé' en fonction de la taille de la fenetre !!!!
C est un probleme d 'ecole et pas une facon d aller vite.
PS: je crois que je prefere un degragé sur les bords et gris/blanc au centre.
Si tu trouves la solution, jessayerai de mon coté d'agrandir ta div et donc ton degradé en fonction de taille de la fenetre. Mais vraiement c est fastidieux pour pas grand chose. -
-
Je suis partie sur autre chose, nouvelle idée, nouvelle envie. Je dois faire un petit site internet pour une coopérative des artisans du bois donc j'ai pensé mettre en fond de fenêtre une belle image en rapport avec le bois, et en fond de support de travail soit (width=970) une couleur en dégradé (si c'est plus simple, ca ne me gène pas qu'elle termine sur le blanc).
Quelqu'un à une solution simple ?
-
