[Résolu] Arrière-plan différent en en fonction des pages

[jimbouge]

EDIT :
Cette explication est obsolète, les nouveaux design intègrent ces fonctions par défaut. Cela reste d'actualité pour les anciens design

Bonjour à tous,

Voila je commence doucement à utiliser JimDo et suivre les différents tutos.
J'accroche plutot bien et je compte bien prendre la version pro.

Je bloque un peu sur le design...; Pour faire simple , je post en arrière plan de la première page une petite vidéo ( qualité faible etc etc pour ne pas ralentir le temps de chargement de la page )... Mais celle-ci, ce " fond vidéo " s'applique sur toutes les autres pages ... Sur ces autres pages, une simple photo me suffit.

Quelqu'un à une solution pour moi ?

Merci beaucoup D'avance
Jimmy !

[Gwenael.Jimdo]

Bonsoir Jimmy,

Jimdo ne propose pas cette possibilité. L'arrière plan (vidéo, image, diaporama) que vous avez choisi s'intègrera, par défaut, sur toutes les pages de votre site.

Vous pourrez très certainement y parvenir en intégrant du code dans le head de votre site.

De nombreux tutoriels à ce sujet se trouvent sur internet

Une bonne soirée à vous.

[jimbouge]

snif ! Fais faire des recherches alors. En tout cas merci de votre réponse ! Si je trouve une solution je n'hésiterais pas à la laisser ici. Bonne soirée également

[FredVig]

En résumé :
- héberger vos images de fond sur un site genre host, free, picasa (…) ou sur une page cachée de votre site jimdo ou éventuellement sur dropbox.
- Récupérer l'adresse de chaque image
- Récupérer le nom de chaque page jimdo de votre site
- modifier le head ainsi :

Code:

#page-(nom de la page : une suite de chiffre, sans les parenthèses)  {background-image: url('adresse http de votre image de fond')!important;}
#page-(nom de la page2)  {background-image: url('adresse http de votre image de fond')!important;}

répéter pour chaque page.

Il est mieux d'héberger sur un site externe genre freeftp, cela permet de mieux maîtriser la dimension de l'image.
Il est plus simple de retenir et d'identifier l'adresse url et modifier l'image est très simple également.
Si vous voulez une solution totalement Jimdo, enregistrez tous vos fonds dans le module d'arrière-plan, comme si vous vouliez changer les fonds aléatoirement. En chargeant alternativement les fonds, il sera possible d'afficher l'image de fond (clic droit sur le fond du site), et de récupérer son url jimdo en dimension optimale.
Une fois votre code head modifié, il faudra remettre votre fond vidéo par défaut.

[jimbouge]

Hello Hello,

Alors je viens de faire quelques tests avec vos différentes réponses.

@FredVig : Lorsque je rentre ton code, j'ai le message suivant " Une version épurée du code a été enregistrée. Les éléments invalides ont été supprimés " et tout le code disparait :/

Je n'ai alors aucune modification sur les pages.

@Gwenael : Je récupéré ton code, ajouté des infos pour les autres pages. La bonne nouvelle , il y a une modification sur les pages .

Mais , il y a toujours un mais .. La vidéo semble être forcée sur les header des pages.

Pour faire simple j'ai utilisé le code suivant :

<style type="text/css">
/*<![CDATA[*/
body#page-1993815699 {background-image:url https://www.youtube.com/watch?v=Z3MdeWWiPIo&feature=player_detailpage;background-repeat:no-repeat;background-position:center ;background-attachment: fixed ;}

body#page-1993815899 {background: #0099EE}

body#page-1993815799 {background: #EA2423}

/*]]>*/
</style>

soit :

page 1 -> vidéo
page 2 -> fond bleu
page 3 -> fond rouge

Lorsque je lance la page 2 et 3 , le header de couleur apparait , mais laisse place rapidement à la vidéo :/

Est il possible de " fixer " les background ?

Merci à vous pour être aide c'est super sympa de votre part.

VOici le lien du " site " pour que vous puissiez voir ce que cela donne

http://dreamjim.jimdo.com/

[FredVig]

"mon code" n'est pas complet : je ne suis pas allé chercher vos numéros de pages adresses des fonds (évidemment…) et il faut bien entendu le placer entre les balises génératrices de CSS, comme pour TOUS les codes modifier le Head (si on veut modifier les styles). C'est juste un résumé de ce qui est proposé dans le tutoriel.

En faisant clicdroit sur la vidéo > inspecter l'élément, vous constatez que La video "monte" dans une autre div que celle du background.
Il suffit (par exemple) de récupérer l'identifiant de ce contenant et de le masquer lorsque cela vous arrange : #page-1993815899 #cc-jimdo-bgr-video {visibility:hidden!important}

Pour placer, dimensionner, répéter les background, il existe de nombreuse valeurs possibles.
voir https://developer.mozilla.org/fr/docs/Web/CSS/background , cherchez également la signification des valeurs contain et cover, elles vous seront utiles.

[jimbouge]

Parfait !!!

J'avais bien ajouté le nom des pages, mais en effet pas ajouté les balises génératrices :/ ... Il faut m'excuser je ne suis qu'un débutant dans ce langage.

Dans tous les cas ... MERCI BEAUCOUP .. tout d'abord pour ton aide rapide mais aussi par que Ayez ça fonctionne !

Au plaisir !

[FredVig]

Bien joué. Il faut ajouter normalement des point-virgules à la fin de chaque valeur, avant de refermer l'accolade. Il en manque qq.unes
body#page-1993815899 {background: #0099EE;} #page-1993815899 #cc-jimdo-bgr-video {visibility:hidden!important;}
body#page-1993815799 {background: #0099EE;} #page-1993815799 #cc-jimdo-bgr-video {visibility:hidden!important;}

[gui3gui]

Bonjour je suis en train de réaliser la même manipulation; à savoir modifier le head pour avoir une image de fond différente selon la page, mais cela ne fonctionne pas; voilà le code que j'ai placé dans le head.

<style type="text/css">
/*<![CDATA[*/
body#page-2096499423 {background-image:url https://www.dropbox.com/s/21gq6syi9hmuytj/IMG_9599-2%20ter.png?dl=0 !important;}
body#page-2096500023 {background-image:url https://www.dropbox.com/s/y7xn3my0fq30jhj/IMG_9611%20ter.png?dl=0!important;}
/*]]>*/
</style>

Après j'ai un doute sur la valeur donnée à la page

[FilmsdeLover]

Le lien des images n'est pas le bon. Pour le premier, essayez avec celui-là par exemple :

Code:

https://photos-1.dropbox.com/t/1/AAB5oXQIFDbV6o8VnqrpxZfZf5vadZl0akOmB8LW8UG38w/12/11910239/png/1024x768/3/1416513600/0/2/IMG_9599-2%20ter.png/F1NAmCbDVeSBZ3Mwb8H2tNyGq3dZabbrK7H8FDtBr0w

Mais c'est pas sûr que ça marche non plus. Dropbox est assez relou pour ça. Vous devriez plutôt les charger sur votre espace Jimdo (Design personnalisé > Fichiers). Le plus long est de choper ensuite les liens des images mais ça peut se faire une fois que vous les aurez chargé.

[FredVig]

Dropbox change régulièrement sa politique d'accès aux images. Il est préférable d'héberger chez Jimdo (relire mes post : download background aléatoire + récupérer les liens des images)

[fofo34959]

Bonjour,

grâce à vos conseils j'arrive à mettre des images différentes selon les pages (je suis en train de modifier complètement mon site) alors merci.

J'aimerais maintenant savoir comment je peux mettre deux images à la suite (verticalement).
Dans mon cas j'aimerais une photo et lorsque l'on descend on arrive sur un autre fond...

Comment puis-je faire ?
Merci!

[fofo34959]

Après plusieurs recherches et tests j'ai (apparemment) réussi avec ce code :

<style type="text/css">
/*<![CDATA[*/
body#page-2352885822
{background-image: url('http://u.jimdo.com/www400/o/s41cb7d61c6b1b11b/img/i4dcf5f9ba511e448/1436803998/std/image.jpg');
background-attachment: scroll; !important;}
/*]]>*/
</style>

[fofo34959]

Bonjour,
mon site est terminé, réalisé sur safari est parfait, mais sur d'autres navigateurs l'arrière plan ne s'arrête pas au même endroit et donc décale tout...

Pour info, j'ai utilisé ce type de code dans le head :
<style type="text/css">
/*<![CDATA[*/
body#page-2352885822
{background-image: url('http://u.jimdo.com/www400/o/s41cb7d61c6b1b11b/img/i4dcf5f9ba511e448/1436803998/std/image.jpg');
background-attachment: scroll; !important;}
/*]]>*/
</style>

Une idée ? Merci

[ilemaurice.mag]

Salut a tous

J'ai un problème pour mettre  une image different par pages (j'utilise le design Malaga (

ci dessous le code utiliser

<style type="text/css">
/*<![CDATA[*/
body#page-7d3e99721fce889
{background-image: url(''http://u.jimdo.com/www400/o/s37d3e99721fce889/userlayout/img/test.jpg');
background-repeat:no-repeat;background-position:center ;background-attachment: fixed;}
/*]]>*/
</style>  


mon site www.ilemaurice-mag.com

Qui pe m'aider car quand je colle le code dans le header en passant par paramètre rien ne change

merci en avance pour votre aide

[FredVig]

page-7d3e99721fce889 n'est pas une id de page jimdo
à ma connaissance, elles sont toujours sous la forme : page-(suite de chiffres)
comme :
page-1931515952

Vous avez dû faire une erreur à ce niveau.

[ilemaurice.mag]

Bonjour FredVig

comment récupérer l'ID de la page . j'utilise un MAC

le code j'ai eu c'est en passant en mode admin et que je fait l'édition des page


merci pour ton aide

[FredVig]

Ce n'est pas le bon code
Avant d 'intervenir sur le code il est indispensable de comprendre comment ça fonctionne.
Lisez le tutoriel les bases…
Il faut juste "inspecter l'élément" et récupérer son id en mode visiteur

[ilemaurice.mag]

Bonsoir a tous
J'aimerai savoir s'il est possible de mettre une seul page en diaporama exemple mon accueil et les autres pages avec des image fixe ou scroll


J'ai déjà modifier une partie de mon site avec des image en scroll ou fixe

J'ai fait un test en sélectionnant un diaporama pour mon accueil mais celui change automatiquement l'ensemble des fond écran du site

[FredVig]

Quelle page au juste ? Actuellement, vous avez un fond différent par page, je ne vois pas où est le problème.
Avez-vous rechargé votre site après la modification ?

[ilemaurice.mag]

FREDVIG

C'est l'accueil que je souhaite mettre en diaporama mais lorsque je le fait celui ci passe toute les page sous la meme config

J'ai remodifier lorsque j'ai vue l'erreur pour ne pas perturber l'ensemble du site

j'avais changer la config en passant par design > arrier plan > fond personalise > Paramètres pour les images et vidéos d'arrière-plan diaporama

Est-ce qu'il y as un code html que je peux utiliser pour que uniquement la page accueil soit en diaporama

j'utilise le code suivante pour mettre une image par page


<style type="text/css">
/*<![CDATA[*/
body#page-1948400652{background-image: url('http://u.jimdo.com/www400/o/s37d3e99721fce889/userlayout/img/une-boussole.jpg');background-attachment:scroll; !important;}
/*]]>*/
</style>

[FredVig]

Il y a un post là-dessus il me semble…
Mais ce n'est pas simplement "un code qui existe quelque part, tombé du ciel". C'est du temps passé à chercher des réponses par les membres du forum.
Le principe, serait de mettre avec jimdo le fond en diaporama, et ensuite masquer ce fond slider sur chaque page tout en imposant un background particulier avec du code.
Après, il faut étudier les tutos, appliquer à votre site…
Votre code pour avoir une image par page est correct, mais si vous faites un diaporama pour l'accueil, il va se placer par dessus vos images de toute façon, dans un contenant appelé "#cc-jimdo-bgr-slider"
Indiquez que ce contenant doit disparaître sur les autres pages
(ici le numéro de la page)#cc-jimdo-bgr-slider{display:none!important;}

[un pied devant l'autre]

Le post en question (je crois): http://www.jimdoforum.fr/t695-diaporama-sur-la-home-page-images-sur-les-autres-pages?highlight=slider+page+d+accueil.
Marc

[FredVig]

En effet ! Merci

[Contenu sponsorisé]