Codage. Cursus

Partie 1 - Etape 3 : Les Images ou motifs de fond


Auteur : Sparrow-style

Le Principe d'une image de fond

On sait mettre une couleur de fond, mais pour une image, comment fait-on ?
Et bien c'est similaire, voici la propriété CSS qui permet d'afficher un fond : Vous l'aviez déjà vue vaguement dans les étapes précédentes, nous allons nous attarder un peu plus là-dessus.
Il est donc possible d'afficher une image, mais ce n'est pas la seule chose qu'il est possible de faire avec le "background". En effet, nous pouvons aussi :
- décider de son positionnement (en haut, en bas, à droite, à gauche... mais aussi en bas à droite, ou en haut à gauche, par exemple)
- de sa répétition : à savoir s'il se répète ou non et dans quel sens (horizontalement ou verticalement)
- de son défilement : savoir s'il reste fixe malgré le défilement de page ou au contraire s'il défile en même temps qu'elle (par exemple le fond de la bannière sur ce site défile en même temps que la page, c'est à dire que lorsque vous descendez il reste en haut de page donc disparait vers le haut.)

Couleur de fond


Image de fond


Positionnement du fond


Répétition du fond

Autres valeurs possibles :
- repeat-x; => répète le fond sur l'horizontale
- repeat-y; =>répète le fond sur la verticale
- repeat => répète le fond partout, horizontalement et verticalement.

Pour vous en souvenir, visualisez un graphique dans votre tête. L'axe des "x" est l'axe horizontal, celui des "y" est le vertical. Je sais que cela ne fait pas plaisir à certains d'entendre parler de quelque chose se rapprochant des maths, mais cela reste simple. Rassurez-vous, je suis littéraire de base ! XD

Défilement du fond

Pour que le fond défile en même temps que la page il suffit de remplacer "fixed" par "scroll". Cependant, même si vous n'indiquez pas cette propriété, le fond est par défaut en "scroll".

Cela fait beaucoup de propriétés, et pour ne pas avoir à écrire 5 fois "background-quelque chose" dans votre css il y a un moyen de réduire toutes ces propriétés en une seule, de cette façon : Et oui, vous avez sur une seule ligne tout ce qu'il vous faut ! Seul un espace sépare les valeurs, et tout ce qui concerne le fond est concentré là-dedans, y compris la couleur.
Attention ! Si vous utilisez ce moyen-là pour afficher et mettre en forme votre fond, n'utilisez pas dans le même temps un "background-color" par exemple car sinon il ne sera pas pris en compte, puisque la propriété "background" seule est sensée déjà tout couvrir.


Afficher un motif de fond

Le plus simple est d'afficher un motifs de fond, pas trop contrasté histoire qu'on puisse lire du texte par dessus ce motif, et qui se répète dans tout le cadre choisi. L'avantage de ce procédé est que vous pourrez à loisir modifier la taille du bloc, soit en agrandissant la largeur soit en ajoutant du texte (et donc en étirant le bloc en longueur) sans que le motif ne cesse, il se répètera toujours en couvrant ainsi tout le fond du bloc.

L'inconvénient, c'est qu'il faut le trouver... et sincèrement je vous conseille plutôt de le créer dans votre logiciel de retouche d'image, si toutefois vous en avez un bien sûr. Utilisez les motifs de base de votre logiciel, ou une simple texture par exemple. Tout est possible, l'essentiel étant que le motif puisse se répéter sans avoir de "cassure" (autrement dit qu'on voit cette répétition).

Il y a bien sûr la possibilité de chercher des fond sur internet, mais vous aurez bien plus de mal à trouver quelque chose qui non seulement soit à votre goût, mais aussi vous permette de répéter le fond sans que cela se voit.

Parce que je sais que tout le monde n'a pas de logiciel graphique, j'ai fait quelques motifs/textures simples que vous pouvez utiliser librement (ce sont davantage des textures que des motifs, mais s'utilisent de la même façon, ce n'est que le type d'image qui change).

Sur la toile, des "patterns" (terme anglais) peuvent vous permettre de vous aider à confectionner les vôtres. Vous trouverez quelques motifs sur les sites présentés ici :
Ava7patterns
Colour lovers
Kollermedia
Squidfingers
Fontastica

Nous allons à présent mettre en place l'un des motifs dans un bloc texte, même si je rappelle qu'une image en fond peut aussi être placée sur une balise de type "inline".
Cum autem commodis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, anxia deliberatione tractatur an exceptis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit.
Vous constatez que dans la propriété "background" je n'ai pas indiqué de positionnement du fond. En effet, vu qu'il se répète partout dans mon bloc, je n'ai pas besoin de l'indiquer, la propriété "repeat" étant par défaut.


Une image de fond

Si vous souhaitez afficher une image de fond seule, de type décors, ou paysage par exemple, cela est possible, mais vous allez vous heurter à un problème majeur : l'image ne va pas pouvoir se répéter de manière esthétique.
Comment palier à ce problème là et afficher quand même une image de fond sans que ce soit un motif ou une texture répétée partout dans mon bloc ?
Il y a plusieurs façon d'afficher une image en fond, le tout est de savoir ce que vous voulez mettre et où vous voulez la mettre.
S'il s'agit d'un paysage qui représente (par exemple) votre contexte de jeu de rôle, il va falloir créer une image tout à fait simplement qui ne fasse que le haut de votre bloc. Ainsi, peu importe sa longueur, l'image restera en haut, ne se répètera pas et décorera quand même votre bloc texte.
Mais alors, la rupture se verra quand même ?
Justement, c'est là que votre outil de création graphique vous sera utile... Et vous pouvez bien ne pas vous intéresser au graphisme, lorsque l'on code il est utile parfois de créer quelques éléments simples pour un fond par exemple, de même que lorsqu'on graphe il est utile d'avoir des notions en codage, au moins minimes !

Voici par exemple l'image que je vous propose :
Je sais pas faire ça / Je n'ai pas le logiciel qu'il faut, je fais comment ?
Vous êtes sur un forum de graphisme, entre autres de ses fonctions, alors vous pouvez très bien passer commande ! :).

Comment j'ai fait cette image : j'ai pris la longueur de ma futur bloc texte (l'inconvénient c'est donc qu'il faut qu'il soit fixe, en pixel, et savoir à l'avance combien il fera du coup, ici j'ai pris 700px de large), une hauteur de 200px, mais vous pouvez prendre davantage, le tout est que l'image ne soit pas immense non plus... et j'ai placé un décors dans mon document avec une couleur de fond choisie en dessous. J'ai simplement gommé l'image en bas afin qu'elle se floute à la fin, et voilà ! Rien de complexe, n'est-ce pas ?

Voyons maintenant ce que ça donne dans mon bloc :
Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.

Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
Il faut bien évidemment utiliser en couleur de fond la couleur de votre image créée ! De plus, il faut bien penser à demander au background qu'il se place en haut au centre et qu'il ne se répète pas.
Hé mais attends... Y'a un souci dans ton code, le cadre est plus large que l'image, et pourtant dans le code y'a bien 700px de largeur ?!? Comment ça se fait ?
Et oui, il y a bien un problème ici, et le décallage sur les côtés vient du fait que j'ai placé des marges intérieures (padding) pour que mon texte ne touche pas les bords de mon cadre !
Pour éviter d'obtenir un tel résultat, il est mieux de faire deux blocs, l'un englobant l'autre, en mettant le fond dans le premier, et le texte dans le second. Je vais donc créer un second bloc à l'intérieur pour mettre mon texte, et dans ce cas là le padding ne m'agrandira plus mon bloc contenant le fond !
Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.

Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
Mieux non ? ^^ Et là, vous pouvez également mettre une marge intérieur en haut plus importante qu'ailleurs, pour qu'on voit un peu le fond, comme ceci :
Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.

Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
Libre à vous par la suite de justifier le texte, changer le style des bordures ou ce que vous voulez !
Mais alors, dans la même idée, on peut très bien afficher un fond en bas du cadre, ou dans un coin ?
Tout à fait ! Faites une image de coin et affichez-la dans un coin sans la répéter pour avoir également un bel effet ! Un exemple ?
Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam parietes arcanorum soli conscii timebantur.
L'avantage de placer le fond dans un coin, c'est que vous pouvez agrandir votre zone tant que vous le voulez, votre fond sera toujours bien placé !
Dans un style plus sobre mais très joli, vous pouvez mettre dans votre cadre un dégradé, pour cela créez votre fond avec deux couleurs, dont une que vous étendrez à votre fond en l'utilisant comme couleur de fond.
Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.
Vous pouvez constater que dans ce cas là aussi la taille importe peu, le fond se répète sur la largeur en bas du cadre.
Pour ne pas alourdir votre page, lorsque vous répétez un fond comme ceci ne le faites pas inutilement large ! Dans mon cas, il fait 100x100 ! Regardez par vous-même :


Plusieurs images de fond ?

Puisqu'il est possible d'afficher un fond uniquement en haut de cadre, ou uniquement en bas de cadre par exemple... est-il alors possible d'afficher deux images de fond qui seraient l'une en haut et l'autre en bas de notre cadre ?
Et bien depuis pas si longtemps que ça, OUI ! c'est possible, et même carrément pratique ! J'aborde ce point maintenant, même s'il s'agit de CSS3, autrement dit les dernières possibilités de CSS3 actuellement disponibles, car j'estime que c'est dans le prolongement logique de cette étape que d'aborder cette possibilité. Sachez que même si cette propriété est très pratique, surtout lorsque l'on aborde le webdesign, elle n'est pas vitale non plus, et vous pouvez très bien être un bon codeur sans la maîtriser, même s'il est préférable de savoir qu'il est possible de le faire et de quelle façon. Du coup, ne vous affolez pas si vous ne comprenez pas cette partie là ou bien si elle ne vous parait pas très claire.
Avant tout, sachez que les propriétés de CSS3 comme c'est le cas pour celle que je vais aborder ne sont pas comprises par tout les navigateurs, notamment les anciennes versions, donc par exemple Internet Explorer 6, donc une version qui n'est pas à jour. Dans le cas présent, au lieu d'afficher les images de fond... il n'afficherait rien du tout. Cela peut être ennuyeux, mais j'utilise personnellement assez souvent ce sytème de fond multiple et dès lors que le navigateur de l'utilisateur est à jour, tout se passe très bien.
Comment placer plusieurs images de fond ?
Nous allons devoir à nouveau séparer les différentes propriétés du fond, comme nous l'avons vu tout au début, donc mettre à part le "background-image", le "background-position", etc... Ainsi, nous pourrons placer dans chaque propriété les deux fonds et leur valeurs. Je vous montre le css seul :
L'ordre des images a de l'importance ! La première sera toujours prioritaire, ce qui fait qu'elle sera au dessus de la deuxième, dans l'exemple ci-dessus. Si à un endroit les images doivent se chevaucher, celle placer en premier passera au dessus de la deuxième, qui passera au dessus de la troisième, et ainsi de suite.
Par exemple, sur cette page de site, il y a de nombreux fonds : les deux barres sur les deux côtés, mais aussi le motif qui se répète en fond de page, ainsi que le fond de la bannière et le bas de page ! Ca fait beaucoup, et il faut bien que les images soient placées dans l'ordre ! Enfin, dans votre cas nous n'en sommes peut-être pas encore là, retenez simplement cette règle, ainsi que la suivante qui est cependant logique...
L'ordre des informations doit correspondre à l'ordre des images ! Vous ne pouvez pas mettre d'abord votre image 1 puis l'image 2 dans les adresses et dans la propriété suivante indiquer d'abord la position de l'image 2 puis de l'image 1. Il faut respecter l'ordre à chaque fois pour les informations, afin que le navigateur sache à quelle image l'information se rapporte.
Un exemple illustré peut-être ?
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

Adolescebat autem obstinatum propositum erga haec et similia multa scrutanda, stimulos admovente regina, quae abrupte mariti fortunas trudebat in exitium praeceps, cum eum potius lenitate feminea ad veritatis humanitatisque viam reducere utilia suadendo deberet, ut in Gordianorum actibus factitasse Maximini truculenti illius imperatoris rettulimus coniugem.
Il ne faut pas oublier d'indiquer la couleur de fond, et afin que mes deux images ne se chevauchent pas dans le cas présent j'ai imposé une hauteur de 300px, mais j'aurais pu l'augmenter au besoin, évidemment.
Ici, il y a deux images, l'une en haut qui ne se répète pas, et l'autre en bas qui se répète sur la largeur.
Il y a bien évidemment des possibilités multiples !

Une image de fond unique et fixe ?

Et si je tiens vraiment à avoir une seule image de fond, d'une hauteur définie, sans qu'elle se répète... est-ce que je peux pas simplement bloquer la hauteur de mon bloc avec un défilement de texte ?
Si ! C'est possible, et ce sera notre dernier point pour cette étape.
Afin de pouvoir mettre une image entière et non répétée en temps que fond, il nous faut déterminer une largeur et une hauteur fixe pour notre bloc. Pour la largeur, aucun souci, nous l'avons déjà fait, mais pour la hauteur... elle dépend du contenu, du coup si votre texte ne change pas c'est facile, mais si vous voulez pouvoir l'allonger il ne faut pas que votre bloc change de hauteur pour autant, et pour cela, il va falloir se servir d'une nouvelle propriété css : l'overflow !

Qu'est-ce que c'est ? Cette propriété permet de gérer le comportement de tout ce qui pourrait dépasser d'un bloc si vous lui définissez une taille. Il possède plusieurs valeurs possibles :
• overflow: visible => c'est comme s'il n'y avait rien, cela laisse visible ce qui dépasse du cadre.
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.
Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis conloquiis et nocturnis qua vi, quibusve commentis id fieret, antequam effundendis rebus pertinacius incumberet confidentia, acciri mollioribus scriptis per simulationem tractatus publici nimis urgentis eundem placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.


Dans notre cas, le texte dépasse du cadre.
• overflow: hidden => cache la partie qui dépasse.
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.
Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis conloquiis et nocturnis qua vi, quibusve commentis id fieret, antequam effundendis rebus pertinacius incumberet confidentia, acciri mollioribus scriptis per simulationem tractatus publici nimis urgentis eundem placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.


Plus rien ne dépasse, mais une partie de l'information est désormais masquée, et donc perdue...
• overflow: auto => impose un scroll (barre de défilement) à l'endroit où c'est nécessaire, donc en bas ou sur le côté.
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.
Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis conloquiis et nocturnis qua vi, quibusve commentis id fieret, antequam effundendis rebus pertinacius incumberet confidentia, acciri mollioribus scriptis per simulationem tractatus publici nimis urgentis eundem placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.
L'overflow possède aussi la valeur "scroll" qui met obligatoirement une barre en bas et sur le côté.
Dans le cas présent, l'overflow doit être mis sur le bloc à l'intérieur, celui contenant le texte.

Vous venez de voir comment fonctionnent les fonds, il ne faut pas oublier que ces procédés sont utilisables pour tout types de fond, cela inclu les fonds de page ! Beaucoup ont du mal au début avec ces fonds de page pour vos thèmes par exemple, et bien cela fonctionne de la même façon à ceci près que nous ne pouvez pas y imposer de taille puisque la résolution des écrans de vos visiteurs est variable. Ainsi donc, il vous faut jouer avec les images de fond bloquées ou répétées.


Etape précédente Etape suivante