Images de fond différentes droite & gauche

[@nnie]

Bonjour,

Est-il possible de mettre une image de fond avec des motifs différents à gauche et à droite du forum ?
Par exemple, des pommes à gauche, des oranges à droite ?

J'ai bien pensé à une image unique dont les motifs seraient sur les bords, mais dans ce cas, comment faire pour que cela encadre correctement le forum, quelle que soit la taille de l'écran ?

Merci d'avance pour toute aide !   

[Neptunia]

Bonjour ^^

Voici un tutoriel qui devrait vous permettre de réaliser ce que vous souhaitez
Image de fond changeante selon la résolution du visiteur

[@nnie]

Bonjour AoF-Neptune et merci pour cette réponse rapide !   

J'avais déjà regardé ce tuto mais il ne répond pas à toutes mes interrogations : notamment, faut-il dans ce cas définir la taille du forum en pixels ou en pourcentage ? Que signifie "taille plus grande que 1600px de large" ? Je suppose qu'il y a une histoire de proportions  à respecter ?
D'autre part, avec des images de cette taille, l'affichage n'est-il pas trop ralenti ?

[Neptunia]

- Si vous souhaitez adapter l'image de fond en fonction de la résolution des visiteurs cela me semblerait plus logique de faire de même pour la largeur de votre forum donc une largeur exprimée en pourcentage. Mais ce n'est pas obligatoire.

- Le tuto met une image de fond, la plus grande possible en tant que fond par défaut et ensuite change ce fond sous certaines conditions.
Si aucune de ces conditions n'est remplie, le script affichera l'image définie comme plus grande que 1600 pixels de large. Plus grand ça peut être 1920 px par exemple ou bien 50 millions de pixels.

- Ce n'est pas la taille qui compte (largeur/hauteur) mais le poids en kilo-octets de l'image et bien sûr le débit de la connexion de vos visiteurs.
Pour des personnes ayant une connexion ADSL classique (20 ou 30 MB) éviter des images supérieures à 500 ko, et proscrire celles de plus de 1 Mo. Ces chiffres sont subjectifs, c'est juste pour vous donner un ordre d'idée. De plus ces images ne seront chargées qu'une fois à moins que le visiteur ne vide son cache régulièrement.

[@nnie]

Si vous souhaitez adapter l'image de fond en fonction de la résolution des visiteurs cela me semblerait plus logique de faire de même pour la largeur de votre forum donc une largeur exprimée en pourcentage. Mais ce n'est pas obligatoire.

Je suis bien d'accord, mais justement : que se passerait-il avec une taille de forum en % et des images en pixels (donc tailles fixes) ? Est-ce que le cadrage restera le même ? Ou au contraire est-ce que ça ne serait pas tout cafouillis ?

[Neptunia]

Le forum c'est une chose, et le fond une autre.

Le fond couvrira 100% de l'écran du visiteur. Le forum lui ne couvrira que la valeur que vous indiquez.

- Avec une image de 1280 pixels et un forum de 90%, si l'utilisateur a une résolution de 1280 pixels de large, là où se trouve votre forum l'utilisateur verra 64 pixels de l'image de fond à gauche comme à droite (1280 * 10% / 2)

Avec un forum de 800px
L'utilisateur qui a une résolution de 1024 pixels verra l'image en 1024 pixels et le forum au milieu, soit 112 pixels de chaque côté.
L'utilisateur qui a une résolution de 1366 pixels verra la portion centrale de votre image en 1600 pixels (si vous suivez exactement le tuto) donc il ne verra pas les 117 pixels aux bords gauche et droit de votre image. Il verra toujours un forum de 800 pixels de large et donc l'image couvrira 283 pixels a gauche et a droite.

Pour faire court si vous indiquez une taille de forum en pixels, plus l'utilisateur aura un grand écran, plus votre forum sera minuscule.

[@nnie]

Merci pour ces explications, que je comprends bien.
Hélas, mon problème reste entier : étant donné qu'à la base, ma demande était de savoir si je pouvais avoir des motifs différents de chaque côté, cela veut donc dire que le fond n'est pas uni. Et s'il n'est pas uni, que vont devenir mes motifs latéraux si le fond a une taille fixe et le forum un % ?

J'essaie d'être claire, mais ce n'est pas facile.
Un exemple concret sera plus parlant, alors voilà  :



Les lettres de chaque côté représentent les motifs différents que je voudrais.
Comment obtenir ce genre de fond, avec les motifs qui apparaîtraient comme une bordure, disons, et qui conserverait le même aspect quelle que soit la taille de l'écran ?

[Neptunia]

J'avais bien compris la question.

Le problème n'est pas technique mais une équation arithmétique à 3 inconnues.
- La résolution d'écran des visiteurs que vous ne pouvez pas connaître par avance.
- La taille de l'image de fond que votre forum va afficher.
- La largeur de votre forum en pourcentage que vous ignorez aussi.

Il est évidemment impossible de résoudre parfaitement une équation où rien n'est connu. Donc on s'adapte.

La seule option qui vous reste est de faire un fond pour chaque largeur possible donc une image de 800 pixels de large, puis 801, 802 etc etc, et là vous serez certaine du rendu.

Sinon c'est à vous de calculer en fonction de la largeur de votre forum où doivent se retrouver vos "bordures" sur chaque image. Solution approximative puisque l'on passe par un nombre réduit de résolutions courantes. Donc l'espacement entre le bord du forum et vos motifs variera de quelques pixels en fonction de la résolution exacte.

Si vous voulez un rendu rigoureusement identique, il faudra passer par les templates et rajouter deux colonnes à largeur fixe pour inclure vos bordures.

[AenigmA]

Bonjour,

En schématisant ça donnerait sensiblement ceci

Ouverture Table totale dans overall_header
td largeur fixe premier motif et fermeture
td centré contenant la table bodylinewidth en pourcentage ou fixe
td largeur fixe deuxieme motif et fermeture
Fermeture table totale dans overall_footer_end

Bonne chance

[@nnie]

il faudra passer par les templates et rajouter deux colonnes à largeur fixe pour inclure vos bordures.

Je pense en effet que ce sera la solution. Et du coup, ma question est maintenant : que dois-je mettre dans le template ?

Parce que, Aenigma merci, mais c'est un peu trop ... euh ...  schématisé pour moi ! :
En clair : quel template à modifier ? avec quel code ? SVP    

Sorry, mais là je nage !  

[@nnie]

Up

[MasDan]

Est-il possible de mettre une image de fond avec des motifs différents à gauche et à droite du forum ?
Par exemple, des pommes à gauche, des oranges à droite ?

Oui, c'est tout à fait possible via le CSS.

Voici un modèle qui afficherait un motif de fond avec deux images soit une image de pomme en haut à gauche et une image d'orange en haut à droite.

Code:

body {
  background: url("pomme.jpg") no-repeat top left,
              url("orange.jpg") no-repeat top right,
               url("motif.jpg") repeat;
}


Bien prendre note que l'affichage d'une image masque toutes les images qui sont défini après; d'où l'importance que déclarer le motif de fond d'écran en dernier sans quoi il va être le seul affiché.

Ex 1:


Ex 2:


Et c'est compatible avec différentes largeurs d'écran.

[@nnie]

Bonjour MasDan et merci de voler encore à mon secours !  

Résultat très intéressant, mais ... il y a toujours un mais, désolée !     
Ce que j'aimerais obtenir, ce sont des images qui resteraient accolées au cadre du forum, et non pas qui glisseraient dessous quand on réduit la taille de l'écran, comme c'est le cas ici. Et il faudrait également que ces images se répètent, tout comme le motif de fond.

C'est pourquoi le principe des colonnes est certainement le plus approprié : d'après ce qui a été dit au-dessus, ça passe par les templates, mais lesquels et comment, that is the big question !

[MasDan]

En ajoutant un padding au body, on peut éviter le glissement du texte sous l'image.
Et pour répéter une image à la verticale, il s'agit d'utiliser repeat-y.

Essayez cette exemple.

Code:

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type"     content="text/html; charset=UFT-8">
<meta http-equiv="Content-Language" content="fr">
<meta name="author"    content="MasDan">

<title>Test background</title>

<style type="text/css">
body {
  background: url("http://i57.servimg.com/u/f57/18/43/05/62/pomme710.png") repeat-y left,
            url("http://i57.servimg.com/u/f57/18/43/05/62/orange10.png") repeat-y right,
 url("http://i57.servimg.com/u/f57/18/43/05/62/fond10.jpg") repeat;
  padding: 80px;
}

</style>

</head>

<body>
  <center>
   <h1>Test - background avec trois images</h1>
  </center>
</body>
</html>

[@nnie]

Yes ! on s'approche, on s'approche !   

Manque encore 2 petits trucs :

1) mon image de fond est un dégradé, on ne peut donc pas le mettre en repeat => j'ai essayé de le supprimer dans le code, mais là du coup ça m'enlève aussi les images latérales !   

2) j'ai mis le code à la fin dans index_body, mais je ne sais où le mettre pour que ce soit sur toutes les pages ?

[MasDan]

Bonjour,

Remplacer le code CSS fournit précédemment par ceci

Code:

/*  Début fond d écran */
body {
  background: url("http://i57.servimg.com/u/f57/18/43/05/62/pomme710.png") repeat-y left,
            url("http://i57.servimg.com/u/f57/18/43/05/62/orange11.png") repeat-y right,
 url("http://i57.servimg.com/u/f57/18/43/05/62/degrad10.gif") repeat-x fixed;
  background-color : #dfdaf9;
  padding: 0 80px;
}
/*  Fin fond d écran */

La ligne 5 est un dégradé affiché au haut de l'écran. Pour votre image, remplacé «repeat-x fixed» par «no-repeat center»
La ligne 6 est une couleur de fond.
La ligne 7 modifié pour éviter le padding au haut et au bas de l'écran.

Il n'y a aucune modification à faire à votre template. Le code CSS doit être ajouter ici (et s'applique sur toutes les pages)

  Panneau d'administration
  Affichage
  Images et Couleurs / couleurs
  Feuille de style CSS
  Ajouter votre code et n'oubliez pas le bouter valider.

Note: éviter les caractères  { }  '  "  dans les commentaires  (débute par /* et se termine par */) car une validation de forumactif vérifie la parité de ces caractères. Les inclurent dans les commentaires peut provoquer l'apparition d'un message d'erreur.

Si le problème persiste, est-ce possible d'avoir un lien du forum ou le code CSS et une capture d'écran?

[@nnie]

Grand grand grand merci, MasDan : c'est juste parfait, et en plus sans toucher aux templates !

[AenigmA]

C'était un peu compliqué par template (pour ça que je ne t'ai pas donné de nouvelle Annie bien que je l'avais fait)

Bien jouer Daniel