Mettre une image

2 participants

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

Résolu Mettre une image

Message par Invité Jeu 15 Sep 2016 - 17:54

Bonsoir, est-il possible d'insérer une image verticalement et en répétition pour un effet "guirlande" à droite de la page forum. (code?) Merci, cordialement.


Dernière édition par misslena le Jeu 22 Sep 2016 - 21:06, édité 1 fois
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Sam 17 Sep 2016 - 17:49

Bonsoir, mettre une image en répétition à droite du forum (bordure) toujours d'actualité. Merci
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Lun 19 Sep 2016 - 13:08

Bonjour, up merci.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par néco Lun 19 Sep 2016 - 22:12

salut à toi
j'ai une idée , je sais pas si ça te plaira , essaie et réfléchie ensuite Wink

déjà ce ne sera pas une image qui se répète , il te faudra une seule et unique image très longue en hauteur pour couvrir toute les taille d'écran , je dirais au bas mot 2000 pixels de haut ^^
tu peux toi même répéter ton image sur paint pour en faire une longue tige ^^

vas sur ton PA ---> affichage ---> template "général" ---> overall_footer_end
tont en bas du template , juste avant
Code:
</body>
</html>

tu colle ce code tel quel sans rien changer pour l'instant

Code:
  <!-- bouton accueil en longueur à droite décoratif -->
<script type="text/javascript">$(function(){
                  $("body").append('<div class="tige"><a href="http://houla.1fr1.net/"><img src="http://i97.servimg.com/u/f97/16/02/70/00/ligne12.png" /></a></div>');
        }); </script><!-- fin de ligne de décoration -->

n'oublie pas de le valider DEUX FOIS
une fois avec :enreg:
et la deuxième fois avec Ajout


et ensuite tu vas dans ---> affichage ---> couleur ---> feuille de style css

et tu colles ce code

Code:
/** emplacement du bouton ligne de déco se trouvant dans mon template overall footer end  **/
          .tige {
            top: 30px;
            right: 5px !important;
            position: fixed;
            z-index: 100;}

pense à valider ta feuille de style pour enregistrer les changements

ça te donnera une ligne de déco à droite comme tu le demande , mais en plus si tu clic sur cette ligne ça remet directement sur la page d'accueil Wink
c'est sympa non ? à la fois beau et utile ^^ Wink

après avoir essayer , si ça te plait tu pourras ensuite bien évidement changer le lien image que j'ai mis dans le 1er code , celui du template

n'oublie pas que comme c'est une grande image , avant de l'héberger tu dois absolument choisir l'option "non" dans la case du redimensionnement automatique

et ensuite tu prend impérativement le "lien direct" , c'est celui du haut parmis les trois choix que l'hébergeur du forum te donne
dans le code c'est ce lien que tu devra changer https://i.servimg.com/u/f97/16/02/70/00/ligne12.png

bizzz

PS : si quelqu'un de qualifier trouve une erreur dans ce que j'ai dis , qu'il n'hésite pas à me corriger svp , tant pour elle que pour moi ^^

bizzz à tous
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Mar 20 Sep 2016 - 6:06

Bonjour Néco, merci beaucoup pour cette proposition, que je vais tester dès que possible... et surtout trouver l'image à 2000 pixels. Wink Je vous tiens au courant, belle journée à vous.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par néco Mar 20 Sep 2016 - 16:43

tu peux déjà faire le test avec les codes que je t'ai donné pour voir déjà si ça te conviens ou non , dans le code en question il y a déjà une grande image (un peu moins de 2000px mais osef c'est kifkif)

car si ça ne te conviens pas , pas la peine de chercher une image pour rien Wink

en plus , à te lire , il me semble avoir deviner que tu avais déjà ton image choisie (celle que tu voulais répéter)
veux-tu me la mettre pour voir stp ?

bizzz
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Mar 20 Sep 2016 - 20:29

Bonsoir Néco, yes! Bravo et merci! Ton code fonctionne très bien! (Tu m'as fait une superbe guirlande! Ptdr)
Ce qui est dommage c'est le fond blanc, je ne sais pas si c'est possible en transparence.
J'avais dans l'idée ce genre d'images:

https://i.servimg.com/u/f97/19/47/88/69/rose_s10.png
ou
https://i.servimg.com/u/f97/19/47/88/69/ribbon10.png

Je l'aurai peut-être répété 4 ou 5 fois avec un espace entre les deux pour que cela fasse un minimum aéré. Soit le long de la page, soit jusqu'à hauteur du début bloc forum.

En tout cas , merci de ton aide j'ai déjà bien avancé avec ton code. Cordialement
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Mettre une image

Message par néco Mar 20 Sep 2016 - 22:29

coucou
bon malheureusement , moi perso , j'ai pas de quoi faire des images transparente , mais je t'ai bidouiller un truc , j'espère que ça te plaira ^^
j'ai supposé que c'était pour le forum dans le lien de ton topic (si c'est pas le cas donne le lien stp), donc j'ai pris la même couleur que ton fond à la place du blanc comme ça , ça se vois pas , ça fait comme si c'était transparent Wink
je me suis inspirer de tes deux images , si ça te plait pas , sache que tu peux éventuellement faire une demande dans la section graphisme du forum Wink

si tu veux le descendre au niveau du forum , dans le css à top:30px remplace le 30 par ce que tu veux ça le fera descendre
d'ailleurs le right:5px tu pourais le mettre à 0px ça plaquerait plus à droite , au contraire plus tu mettra un gros chiffre plus ça décalera vers la gauche Wink

si jamais l'image empiète un peu sur ton forum , dis le moi , j'ai des solutions pour ça Wink

bizzz

zut j'ai failli oublier le lien , hihi ^^
tiens le voici (tu peux le copier coller dans ton tempate directement , pas besoin de le réhéberger encore Wink )

https://i.servimg.com/u/f97/16/13/24/40/tigefl10.png

re bizzz
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par MasDan Mer 21 Sep 2016 - 5:35

Bonjour,

Une autre solution n'utilisant que le CSS avec deux images en background, votre image de fond de page et une deuxième situé sur la bordure droite qui se répète verticalement.

Ajouter ceci à votre CSS.
Code:
body {
  background-position: top right, top left;
  background-repeat: repeat-y, repeat;
  background-image: url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                    url("http://i97.servimg.com/u/f97/19/47/88/69/78747_10.jpg");
}

Vos deux images (rose et ribbon) ont déjà la transparence. C'est le background de la DIV qui ne possède pas la transparence.
MasDan

MasDan
Membre habitué

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

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

Résolu Re: Mettre une image

Message par Invité Mer 21 Sep 2016 - 17:15

néco a écrit:coucou
bon malheureusement , moi perso , j'ai pas de quoi faire des images transparente , mais je t'ai bidouiller un truc , j'espère que ça te plaira ^^
j'ai supposé que c'était pour le forum dans le lien de ton topic (si c'est pas le cas donne le lien stp), donc j'ai pris la même couleur que ton fond à la place du blanc comme ça , ça se vois pas , ça fait comme si c'était transparent Wink
je me suis inspirer de tes deux images , si ça te plait pas , sache que tu peux éventuellement faire une demande dans la section graphisme du forum Wink

si tu veux le descendre au niveau du forum , dans le css à top:30px remplace le 30 par ce que tu veux ça le fera descendre
d'ailleurs le right:5px tu pourais le mettre à 0px ça plaquerait plus à droite , au contraire plus tu mettra un gros chiffre plus ça décalera vers la gauche Wink

si jamais l'image empiète un peu sur ton forum , dis le moi , j'ai des solutions pour ça Wink

bizzz

zut j'ai failli oublier le lien , hihi ^^
tiens le voici (tu peux le copier coller dans ton tempate directement , pas besoin de le réhéberger encore Wink )

https://i.servimg.com/u/f97/16/13/24/40/tigefl10.png

re bizzz


Bonjour Néco, j'ai deux forums, c'était pour celui-ci Houlaforum.forumactif.com, (je ne sais pas si il s'affiche quand je poste ici, j'ai essayé de passer par le formulaire des messages pré-remplis pour corriger, impossible de valider, cela reste en mode "opaque".
Encore un grand merci à toi d'avoir passer du temps concernant ma demande. Bizz
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Mer 21 Sep 2016 - 17:21

MasDan a écrit:Bonjour,

Une autre solution n'utilisant que le CSS avec deux images en background, votre image de fond de page et une deuxième situé sur la bordure droite qui se répète verticalement.

Ajouter ceci à votre CSS.
Code:
body {
  background-position: top right, top left;
  background-repeat: repeat-y, repeat;
  background-image: url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                    url("http://i97.servimg.com/u/f97/19/47/88/69/78747_10.jpg");
}

Vos deux images (rose et ribbon) ont déjà la transparence. C'est le background de la DIV qui ne possède pas la transparence.


Bonjour masDan, votre code est opérationnel et beaucoup plus simple pour moi, je vous remercie pour cette solution que j'ai appliqué sur mon forum.
Juste une précision, avant de valider "résolu". Si on ne veut mettre qu'une seule image à droite, suffit-il de supprimer le backroung-repeat et de poser le reste du code que vous m'avez donné? Cordialement
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Mer 21 Sep 2016 - 17:35

néco a écrit:coucou
bon malheureusement , moi perso , j'ai pas de quoi faire des images transparente , mais je t'ai bidouiller un truc , j'espère que ça te plaira ^^
j'ai supposé que c'était pour le forum dans le lien de ton topic (si c'est pas le cas donne le lien stp), donc j'ai pris la même couleur que ton fond à la place du blanc comme ça , ça se vois pas , ça fait comme si c'était transparent Wink
je me suis inspirer de tes deux images , si ça te plait pas , sache que tu peux éventuellement faire une demande dans la section graphisme du forum Wink

si tu veux le descendre au niveau du forum , dans le css à top:30px remplace le 30 par ce que tu veux ça le fera descendre
d'ailleurs le right:5px tu pourais le mettre à 0px ça plaquerait plus à droite , au contraire plus tu mettra un gros chiffre plus ça décalera vers la gauche Wink

si jamais l'image empiète un peu sur ton forum , dis le moi , j'ai des solutions pour ça Wink

bizzz

zut j'ai failli oublier le lien , hihi ^^
tiens le voici (tu peux le copier coller dans ton tempate directement , pas besoin de le réhéberger encore Wink )

https://i.servimg.com/u/f97/16/13/24/40/tigefl10.png

re bizzz

J'allais oublié une autre Bizz pour l'image. (fallait y penser, j'ai souri quand je l'ai vu) Merci Néco. Clin d\'oeil
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par néco Mer 21 Sep 2016 - 18:28

de rien , je me doutais qu'une solution comme la sienne existais et en effet c'est plus simple , vaux mieux pas toucher les templates quand on peux éviter ^^

je te laisse entre les mains de MasDan , et j’attends aussi sa réponse car comme je suis pas certaine certaine de la réponse je préfères pas te dire une bétise , je pense connaitre la réponse mais je préfère qu'il passe expliquer lui même son code et comme ça j'apprendrais surement un truc au passage ^^

bizzz

ton forum en lien clicable http://houlaforum.forumactif.com/
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par MasDan Mer 21 Sep 2016 - 19:36

misslena a écrit:Juste une précision, avant de valider "résolu". Si on ne veut mettre qu'une seule image à droite, suffit-il de supprimer le backroung-repeat et de poser le reste du code que vous m'avez donné?
Pas du tout. En supprimant la ligne background-repeat toutes les images adoptent le défaut qui est repeat. Vos images vont se répéter à l'horizontal et à la vertical avec comme résultat un écran tapissé d'image de rose.

Pour afficher l'image de la rose sans répétition, il faut remplacer la ligne suivante
Code:
background-repeat: repeat-y, repeat;
par
Code:
background-repeat: no-repeat, repeat;
MasDan

MasDan
Membre habitué

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

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

Résolu Re: Mettre une image

Message par néco Mer 21 Sep 2016 - 19:46

pardon misslena si je pose une question dans ton topic ^^

salut MasDan salut
à supposer qu'elle ai demandé à avoir une ligne de rose sur chacune des quatre longueur de l'écran (comme un cadre)
es ce que le code aurait été :

Code:
    body {
      background-position: top right, top left, top left, bottom left;
      background-repeat: repeat-y, repeat-x, repeat-y, repeat-x;
      background-image: url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                        url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                        url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                        url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png");
    }

ou pas du tout du tout ? ^^

bizzz à vous deux
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par MasDan Jeu 22 Sep 2016 - 1:42

néco a écrit:
à supposer qu'elle ai demandé à avoir une ligne de rose sur chacune des quatre longueur de l'écran (comme un cadre)
es ce que le code aurait été :

Code:
    body {
      background-position: top right, top left, top left, bottom left;
      background-repeat: repeat-y, repeat-x, repeat-y, repeat-x;
      background-image: url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                        url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                        url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png"),
                        url("http://i97.servimg.com/u/f97/19/47/88/69/rose_s10.png");
    }

Oui mais avec un petit irritant. Dans les coins, les images de rose horizontal et vertical seraient superposé avec un certain décalage.

Dans ce cas, il serait plus judicieux d'utiliser la propriété border-image.
MasDan

MasDan
Membre habitué

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

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

Résolu Re: Mettre une image

Message par néco Jeu 22 Sep 2016 - 18:48

salut salut
merci beaucoup (je m'étais dis la même chose pour les superpositions des angles ^^ )
si ça ne te prend pas de temps et si tu es d'accord , cela donnerait quoi avec border-image stp ?


tu as réussi à faire ce que tu voulais misslena ?

bizzz à vous
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Jeu 22 Sep 2016 - 18:56

MasDan a écrit:
misslena a écrit:Juste une précision, avant de valider "résolu". Si on ne veut mettre qu'une seule image à droite, suffit-il de supprimer le backroung-repeat et de poser le reste du code que vous m'avez donné?
Pas du tout. En supprimant la ligne background-repeat toutes les images adoptent le défaut qui est repeat. Vos images vont se répéter à l'horizontal et à la vertical avec comme résultat un écran tapissé d'image de rose.

Pour afficher l'image de la rose sans répétition, il faut remplacer la ligne suivante
Code:
background-repeat: repeat-y, repeat;
par
Code:
background-repeat: no-repeat, repeat;

Bonsoir Masdan, des roses partout au secours! Wink Plus sérieusement, merci pour ce complément d'informations.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Jeu 22 Sep 2016 - 19:04

néco a écrit:salut salut
merci beaucoup (je m'étais dis la même chose pour les superpositions des angles ^^ )
si ça ne te prend pas de temps et si tu es d'accord , cela donnerait quoi avec border-image stp ?


tu as réussi à faire ce que tu voulais misslena ?

bizzz à vous

hello Néco, oui, nikel, j'ai ma guirlande de roses. Wink .
Pas de soucis pour les questions codes, je pense qu'il est utile pour l'ensemble de la communauté de pouvoir envisager d'autres possibilités pour placer les images à partir de ce sujet. Une belle soirée à tous (es).
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par MasDan Jeu 22 Sep 2016 - 19:04

néco a écrit: (je m'étais dis la même chose pour les superpositions des angles ^^ )
si ça ne te prend pas de temps et si tu es d'accord , cela donnerait quoi avec border-image stp ?

voir ce lien d'un générateur de code pour le border-image.

Il faudrait générer une image quadrillée 3 X 3 et y inclure l'image de la rose partout sauf au centre.


néco a écrit:tu as réussi à faire ce que tu voulais misslena ?
Sauf si retour négatif, je dirais oui; enfin j'espère.
MasDan

MasDan
Membre habitué

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

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

Résolu Re: Mettre une image

Message par Invité Jeu 22 Sep 2016 - 19:19

MasDan a écrit:
néco a écrit: (je m'étais dis la même chose pour les superpositions des angles ^^ )
si ça ne te prend pas de temps et si tu es d'accord , cela donnerait quoi avec border-image stp ?

voir ce lien d'un générateur de code pour le border-image.

Il faudrait générer une image quadrillée 3 X 3 et y inclure l'image de la rose partout sauf au centre.


néco a écrit:tu as réussi à faire ce que tu voulais misslena ?
Sauf si retour négatif, je dirais oui; enfin j'espère.

Messages qui se sont croisés, voir ci-dessus. Wink J'ai appliqué ton code, parfait et simple à appliquer, encore merci. ::fleur::
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par néco Jeu 22 Sep 2016 - 19:52

wouawoo merci beaucoup pour le lien MasDan (je le met de coté ^^)
et merci pour tes réponses aussi bien sûr

merci misslena de m'avoir laissé posé des questions ^^
tu peux mettre en résolu si tu veux , je pense plus poser de question sur ton topic ^^

bonne soirée à vous deux et grosse bize sur vos joues respectives Bizz
néco

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image

Message par Invité Jeu 22 Sep 2016 - 21:07

néco a écrit:wouawoo merci beaucoup pour le lien MasDan (je le met de coté ^^)
et merci pour tes réponses aussi bien sûr

merci misslena de m'avoir laissé posé des questions ^^
tu peux mettre en résolu si tu veux , je pense plus poser de question sur ton topic ^^

bonne soirée à vous deux et grosse bize sur vos joues respectives Bizz

Je mets donc en résolu. Wink Bizz
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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