HTML - Fond dégradé

Réponse 2 / 8

irongege Messages postés 41001 Date d'inscription Statut Modérateur Dernière intervention 5 079

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

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

Réponse 3 / 8

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

Bonne idée...
Tu veux faire une image ou un script java qui t affiche un degradé ?

Réponse 4 / 8

irongege Messages postés 41001 Date d'inscription Statut Modérateur Dernière intervention 5 079

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

Réponse 5 / 8

M0nk

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.

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

ca dependra du nombre de couleur de ton degradé...
sinon y aura un genre de pixelelisation ...
Pourquoi tu le fais pas en javascript avec des divs dont tu changes le background???

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

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>

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

Bon apres pour faire un jeu de couleur, il faut jouer avec rgb()...
Vaux mieux que tu dises quelle genre de fractale de couleur tu voudrais

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

en php tu genereras directement une image tandis que la il faut passer par la touche imprime ecran puis copier coller dans paint pour avoir une image a mettre en background...

ptitnono888

si kkun a désactivé le Javascript ou n'as pas un navigateur compatible il pourra pas voir le fond

Réponse 6 / 8

M0nk

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>

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

quel est le code couleur de to beige?

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

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

M0nk

Alors la c'est du chinois pour moi je n'ai absolument rien compris.
En gros, en javascript on peut faire un super fond dégradé très jolie mais impossible d'ajouter une pauvre instruction align="center" ??

Ca me parrait assez bizarre ça.

Ma couleur est celle-ci : #FFCC66

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

je supose que tu veux ecrire dessus ...
si c est le cas c est plus simple de l'enregistrer puis de mettre l image en background !!!

je cherche le rgb associé a #FFCC66 =rgb(255,204,102)

M0nk

C'est moins jolie aussi de mettre ça en background ?
Si je la met en background, est-ce que je peux la mettre en width=970 et centrer ?

Oui je veux mettre le dégradé en arrière plan sur mon site.

Réponse 7 / 8

M0nk

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

avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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.

M0nk

Est-ce obligatoire ? il s'agit des règles d'interprétation des navigateurs non ?

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

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.

M0nk

Donc je dois mettre quoi moi ? Je ferme correctement toutes mes balises </..>

avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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.

Réponse 8 / 8

M0nk

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 ;)

M0nk

Question subsidiaire, la taille du fond s'adaptera en fonction du contenu de ma page ?

M0nk

Fallentree ?

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

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.

M0nk

Je pensais poser une question super simple et maintenance cela me parait sur-dimensionné.
As tu trouvé un moyen pour solutionner mon problème ?
La procédure avec l'image de 1 pixel de large dans une CSS n'irai pas ?
Elle s'adaptera automatiquement suivant la taille du contenu de mon script ?

M0nk

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 ?

HTML - Fond dégradé

8 réponses

Votre réponse

Discussions similaires