Images de fond différentes droite & gauche
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Images de fond différentes droite & gauche
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 !
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 !
Re: Images de fond différentes droite & gauche
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
Voici un tutoriel qui devrait vous permettre de réaliser ce que vous souhaitez
Image de fond changeante selon la résolution du visiteur
Re: Images de fond différentes droite & gauche
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 ?
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 ?
Re: Images de fond différentes droite & gauche
- 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.
- 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.
Re: Images de fond différentes droite & gauche
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 ?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.
Re: Images de fond différentes droite & gauche
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.
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.
Re: Images de fond différentes droite & gauche
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 ?
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 ?
Re: Images de fond différentes droite & gauche
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.
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.
Re: Images de fond différentes droite & gauche
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
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
Re: Images de fond différentes droite & gauche
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 !
Re: Images de fond différentes droite & gauche
Oui, c'est tout à fait possible via le CSS.@nnie a écrit: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 ?
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;
}
Ex 1:
Ex 2:
Et c'est compatible avec différentes largeurs d'écran.
Re: Images de fond différentes droite & gauche
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 !
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 !
Re: Images de fond différentes droite & gauche
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.
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>
Re: Images de fond différentes droite & gauche
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 ?
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 ?
Re: Images de fond différentes droite & gauche
Bonjour,
Remplacer le code CSS fournit précédemment par ceci
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?
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?
Re: Images de fond différentes droite & gauche
Grand grand grand merci, MasDan : c'est juste parfait, et en plus sans toucher aux templates !
Re: Images de fond différentes droite & gauche
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
Bien jouer Daniel
Sujets similaires
» Image de fond de catégorie (Droite et gauche)
» Smileys à droite et icônes différentes
» Utilisateurs a gauche est non a Droite ...
» widget a droite et a gauche du forum
» Position avatar droite ou gauche
» Smileys à droite et icônes différentes
» Utilisateurs a gauche est non a Droite ...
» widget a droite et a gauche du forum
» Position avatar droite ou gauche
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum