Images de fond différentes droite & gauche

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Images de fond différentes droite & gauche

Message par @nnie le Ven 4 Avr 2014 - 6:56

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

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par Neptunia le Ven 4 Avr 2014 - 7:05

Bonjour ^^

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

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Ven 4 Avr 2014 - 7:31

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

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 ?

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par Neptunia le Ven 4 Avr 2014 - 8:00

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

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Ven 4 Avr 2014 - 8:12

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 ?

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par Neptunia le Ven 4 Avr 2014 - 8:42

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

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Ven 4 Avr 2014 - 9:04

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 ?

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par Neptunia le Ven 4 Avr 2014 - 9:20

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.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par AenigmA le Ven 4 Avr 2014 - 9:47

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 Smile

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Ven 4 Avr 2014 - 12:59

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   Gloups 

Sorry, mais là je nage !  Confused

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Dim 6 Avr 2014 - 2:11

Up

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par MasDan le Dim 6 Avr 2014 - 6:30

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

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Dim 6 Avr 2014 - 6:57

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

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par MasDan le Dim 6 Avr 2014 - 7:35

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>

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Dim 6 Avr 2014 - 8:00

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

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

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 ?

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Images de fond différentes droite & gauche

Message par MasDan le Dim 6 Avr 2014 - 20:06

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)

 Arrow Panneau d'administration
 Arrow Affichage
 Arrow Images et Couleurs / couleurs
 Arrow Feuille de style CSS
 Arrow 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?

MasDan
*****

Masculin
Messages : 797
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par @nnie le Lun 7 Avr 2014 - 5:46

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

@nnie
****

Féminin
Messages : 493
Inscrit(e) le : 04/01/2009

http://partageons.cool.st
@nnie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images de fond différentes droite & gauche

Message par AenigmA le Lun 7 Avr 2014 - 8:19

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 Smile

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum