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

Le Principe d'une image de fond

Et bien c'est similaire, voici la propriété CSS qui permet d'afficher un fond :

Code:

background-image: url(adresse.jpg);

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

Code:

background-color: #000000; => vous connaissez déjà, il s'agit de la couleur de fond, qui sera forcément sous l'image que vous placerez.

Image de fond

Code:

background-image: url(adresse.jpg); => l'image de fond

Positionnement du fond

Code:

background-position: top center; => positionnement de l'image de fond (ici en haut et au milieu, tout combinaison est possible)

Répétition du fond

Code:

background-repeat: no-repeat; => répétition de l'image, ici on ne répète pas l'image.

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

Code:

background-attachment: fixed; => défilement ou non du fond, ici il est fixé c'est à dire qu'il restera malgré le défilement de page.

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 :

Code:

background: url(adresse.jpg) top left repeat-all #000000;

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.

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

Code:

<div style="width: 600px; margin: auto; background: url(http://img4.hostingpics.net/pics/802710motif5.jpg) repeat; color: #272727; font-size: 11px; font-family: georgia; text-align: justify; padding: 4px; border: 2px solid #272727;">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.</div>

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.



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.



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 :




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 :

Code:

<div style="width: 700px; margin: auto; background: url(http://img4.hostingpics.net/pics/791277fondexempletape3.jpg) top center no-repeat #889cae; border: 1px solid #4c6072; padding: 10px; color: #233342; text-shadow: none;">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.</div>

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 !

Code:

<div style="width: 700px; margin: auto; background: url(http://img4.hostingpics.net/pics/791277fondexempletape3.jpg) top center no-repeat #889cae; border: 1px solid #4c6072; "><div style="padding: 10px; color: #233342; text-shadow: none;">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.</div></div>

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 :

Code:

<div style="width: 700px; margin: auto; background: url(http://img4.hostingpics.net/pics/791277fondexempletape3.jpg) top center no-repeat #889cae; border: 1px solid #4c6072; "><div style="padding-top: 100px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; color: #233342; text-shadow: none;">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.</div></div>

Libre à vous par la suite de justifier le texte, changer le style des bordures ou ce que vous voulez !



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 ?

Code:

<div style="width: 700px; height: 150px; margin: auto; background: url(http://img4.hostingpics.net/pics/324877exemple2etape3.jpg) top left no-repeat #8ca290; border: 2px dashed #708a6c; color: #2c392a; text-shadow: none; padding-left: 180px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px;">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.</div>

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.

Code:

<div style="width: 600px; background: url(http://img4.hostingpics.net/pics/207220exemple3tape3.jpg) bottom repeat-x #5e5e5e; border: 1px dotted #383838; padding: 10px; color: #1a1a1a; text-shadow: none;">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.</div>

Plusieurs images de fond ?

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.





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 :

Code:

background-image: url(image1.jpg), url(image2.jpg);
background-position: position image1, position image2;
background-repeat: repeat de l'image1, repeat de l'image2;

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



Un exemple illustré peut-être ?

Code:

<div style="width: 700px; margin: auto; height: 300px; background-image: url(http://img11.hostingpics.net/pics/644625exemplemultifond2etape3.jpg), url(http://img11.hostingpics.net/pics/939810exemplemultifond1etape3.jpg); background-position: top center, bottom center; background-repeat: no-repeat, repeat-x; background-color: #292929; border: 2px solid #000000;"><div style="color: #b6b6b6; text-shadow: none; padding-top: 100px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; text-align: justify;">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.</div></div>

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 ?

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.



Dans notre cas, le texte dépasse du cadre.

• overflow: hidden => cache la partie qui dépasse.



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

Code:

<div style="width: 500px; height: 200px; background: url(http://img4.hostingpics.net/pics/123636fondexemple4etape3.jpg) center center no-repeat; margin: auto; padding-top: 70px;"><div style="width: 450px margin: auto; height: 120px; overflow: auto; color: white; text-align: justify; padding-left: 20px; padding-right: 20px;">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.</div></div>

Etape précédenteEtape suivante

Merci beaucoup pour le code :)
Mais je me demandais s'il était possible de... Comment dire... de rajouter un "voile" ? Je ne vois pas vraiment comment le dire autrement désolée
Il faut que je mette un texte sur une image mais malheureusement il y a beaucoup de contrastes et c'est illisible...

Voilà en gros le résultat:



Problème: il faut que la couleur de la police soit en accord avec le fond donc soit rouge ou orange

Hello, tu peux éventuellement mettre une ombre avec text-shadow, à tester

Oui ! Je n'ai pensé à retoucher l'image qu'après comme une glande ><
Rajouter de l'ombre est une très bonne idée !
Merci à vous :)

j'apprends, j'apprends !

(merci)

Merci pour ces explications :)
Déjà je retiens pour la taille des images, j'aurai pas pensé à en prendre une petite pour éviter que la page mette du temps à charger...