Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Rejoignez le forum, c’est rapide et facile

Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.
Communauté francophone - Jimdo
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-50%
Le deal à ne pas rater :
-50% Baskets Nike Dunk Low
64.99 € 129.99 €
Voir le deal

Position/taille arrière plan

3 participants

Page 1 sur 2 1, 2  Suivant

Aller en bas

Position/taille arrière plan  Empty Position/taille arrière plan

Message par fofo34959 Sam 18 Juil 2015 - 23:04

Bonsoir,

Je vais essayer de faire simple !
J'ai créé un site avec une image différente en arrière plan par page, grâce à des codes placés dans le head.

code pour la page d'accueil :

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

code pour les autres pages (change en fonction de la page) :

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

J'ai mis la fonction "scroll" dans les pages du site (sauf accueil) pour avoir ensuite un fond blanc et agencer ma page comme je le souhaitais.
Sauf que maintenant, mon site est nickel sur un mac, mais sur un ordi plus grand, téléphone, tablette l'arrière plan descend un peu trop et du coup le texte qui devrait être sur le fond blanc est sur l'image...

Je ne sais pas si c'est un problème de navigateur, de site non responsive (pourtant les autres images sont bien...) ou si l'attribut "scroll" n'est pas une bonne idée...bref je suis un peu perdue.

Est ce que quelqu'un aurait un début de solution ?

Merci Smile


fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Dim 19 Juil 2015 - 9:56

Tel quels, la position des backgrounds sera aléatoire dans tous les cas, afin de recouvrir l'espace disponible.
je vois d'ailleurs du texte sur les images.
Il faut composer avec, par exemple en ajoutant un fond blanc au texte devant s'afficher ainsi,
ou modifier le background-size des arrières-plan, mais ça va être galère.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Dim 19 Juil 2015 - 10:54

Merci de votre réponse Very Happy

En effet normalement il doit y avoir juste un titre sur les images et ensuite le reste sur fond blanc. (mon problème est sur toutes les pages sauf accueil)

Que voulez-vous dire par mettre un fond blanc au texte? que la zone texte ne soit pas transparente mais avec un fond blanc ? Parce que du coup, il n'y aura plus que du texte sur l'image mais aussi une zone blanche.

Au lieu d'utiliser l'attribut "scroll", si j'indique qu'il y a deux arrières plan à la suite (la photo et la couleur blanche), est ce que du coup cela peut régler mon problème ? (Cette solution de "scroll" a été trouvée par défaut de na pas avoir réussi à mettre 2 backgrounds).

J'ai en effet essayé de modifier les background-size, avec plusieurs éléments : contain, cover, x-y..sans avoir le résultat escompté...mais utiliser un pourcentage me permettra t-il d'avoir une image qui s'adapte à différentes tailles d'écran ?

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Dim 19 Juil 2015 - 13:32

que la zone texte ne soit pas transparente mais avec un fond blanc ?

Oui : il existe diverses manières.
Vous pouvez imposer le fond blanc seulement aux parties que vous voulez, ce n'est pas obligé de le faire sur tout le texte.
Directement avec du code, ou en imbriquant plusieurs modules colonne/texte…
Vous pouvez sans doute aussi ajouter un "fond" blanc avec un module html, en créant une div d'arrière-plan, attachée au bas de page.
Tout cela sera plus simple que de changer le background-size de l'arrière-plan. (en plus, il disparait sur mobile, dans certaines conditions).
Solie a rencontré récemment des difficultés similaires avec ses arrières-plans.
Cela a mis d'ailleurs en évidence un vrai bug d'interprétation de l'arrière-plan en position fixe sur Ipad (safari)
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Dim 19 Juil 2015 - 17:10

Je n'ai pas tout à fait compris,
mon site a un peu de texte mais la plupart des éléments (même le texte) sont des visuels créés sur photoshop et importés en tant qu'image. Et si je met un fond blanc cela aura la taille d'un rectangle et non d'une bannière par exemple...

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Dim 19 Juil 2015 - 20:22

Par exemple le bloc de présentation : Faustine Debeaumorel.
(Son numéro c'est #cc-m-12233827422)
Vous rajoutez du blanc en arrière plan
Code:
#cc-m-12233827422 {background: white;}
ça évite qu'il soit illisible lorsque le fond passe derrière. Même s'il n'est pas sur toute la largeur.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Dim 19 Juil 2015 - 21:16

J'ai essayé votre méthode avec le code suivant :
<style type="text/css">
/*<![CDATA[*/
body #page-2292003922 #cc-m-12233827422 {background: white;}
/*]]>*/
</style>

Cela donne en effet un fond blanc au texte mais ce n'est pas l'idéal...
Il n'y aurait pas une autre astuce ? J'avais pensé à mettre une bande blanche en dessous de ma photo sur photoshop avant de l'importer à nouveau mais il me semble que ça me déformait l'image dans sa largeur...
Et finalement est ce possible de mettre un code dans le head qui indique 2 arrières plan à la suite ? (la photo et le fond blanc) J'avais cherché à faire cela en premier sans succès...

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Lun 20 Juil 2015 - 10:02

Cela ne donnera rien de mieux.
Il faut un élément "fond" qui soit séparé du background.

Cela donne en effet un fond blanc au texte mais ce n'est pas l'idéal...
Le soucis vient sans doute du fait que vous ne préfigurez pas exactement ce que vous voulez obtenir.

Répondre à :
- Quel effet ?
(par exemple, rendre mon texte XX lisible)
Permet de déterminer >
- Quels moyens ?
(par exemple faire un fond blanc attaché au texte, mais occupant toute la largeur de fenêtre)
Permet de déterminer >
- Quels codes
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Lun 20 Juil 2015 - 10:05

Je lis bien que vous voudriez intervenir sur le background. Mais dans ce genre de disposition, celui-ci va "naviguer" de façon assez imprévisible selon la fenêtre, le navigateur etc. Dans certains cas, il va même totalement disparaître.
Donc, il faut assurer une bonne lisibilité indépendamment du background.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Lun 20 Juil 2015 - 10:43

Oui c'est ça, il me faut un élément fond séparé du background.

D'accord, donc concrètement je vais prendre l'exemple de la page "agence" :
-Effet : je veux qu'à partir de "commençons les présentations" le fond (toute la largeur de la page) soit blanc, rendant ainsi visible les textes visibles sur tous supports.

-Moyen : aucune idée ^^ mais
"(par exemple faire un fond blanc attaché au texte, mais occupant toute la largeur de fenêtre)" a l'air pas mal.

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Lun 20 Juil 2015 - 11:40

C'est ça, il faut insérer une div grâce à un module html au dessus du texte
Fond blanc, position relative, left: -100%, largeur… grande ! : 300%, hauteur grande aussi. il faudra aussi peut-être modifier son Zindex
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Lun 20 Juil 2015 - 14:35

J'ai essayé ce code dans un widget html mais apparemment rien ne se passe, j'ai du faire une erreur :

<style type="text/css">
/*<![CDATA[*/
body {background: #FFFFFF; !important;
height: 300%; !important;
width: 300%; !important;
background-position: left: -100%;!important; }
/*]]>*/
</style>

Le Zindex ?

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Lun 20 Juil 2015 - 14:39

J'ai testé ça aussi :

<style type="text/css">
/*<![CDATA[*/
#cc-m-imagesubtitle-image-12233825122
{background: #FFFFFF; !important;
height: 300%; !important;
width: 300%; !important;
background-position: left: -100%;!important; }
/*]]>*/
</style>

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Mar 21 Juil 2015 - 15:15

J'ai essayé de plusieurs manières et rien n'y fait, lorsque j'enregistre jimdo ne le prend pas en compte...

Est ce que vous voyez une erreur dans mon code ?


fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Mar 21 Juil 2015 - 17:22

EN fait, c'est plus simple :
Vous écrivez directement en html dans un module html, genre :
Code:
<div id="bando"></div>
et ensuite, pour décrivez la div en css dans le "modifier le Head"
par exemple :
<style type="text/css">
Code:
/*<![CDATA[*/
#bando
{background: #FFFFFF; !important;
position: relative;
left: -100%;
height: 300px;
width: 300%; }
 (ici, vous laissez le code déjà présent dans votre modifier le head)
/*]]>*/
</style>
En l’occurrence, le !important ne sert pas, puisque c'est une nouvelle div, mais ça ne coute rien.
Par ailleurs, il faut mettre ce !important juste AVANT le point virgule de la valeur qu'on veut imposer :
width: 300% !important; et pas width: 300%; !important;
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par Solie Mar 21 Juil 2015 - 18:25

Et background: #FFFFFF !important; et pas background: #FFFFFF; !important;
Non ? Wink
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Mer 22 Juil 2015 - 9:48

Merci pour vos réponses, malheureusement maintenant j'ai un bandeau blanc qui se balade sur l'image !

J'ai inséré le widget html ainsi que ce code dans le head :

<style type="text/css">
/*<![CDATA[*/
#bando
{background: #FFFFFF!important;
position: relative;
left: -100%;
height: 300px;
width: 300%; }
/*]]>*/
</style>

J'ai même essayé avec background-attachment: fixed; en plus mais ça me la fixe au milieu de l'image.

Quand vous dites "width: 300%; }
(ici, vous laissez le code déjà présent dans votre modifier le head)" vous parlez du code qui permet d'avoir une image par page?

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par Solie Mer 22 Juil 2015 - 14:49

Sur petit écran, type iPad, ça fonctionne
Position/taille arrière plan  Image24
Pour que ceci s'adapte à toutes les tailles d'écrans, ça risque d'être assez galère.

Certains designs Jimdo comme celui-ci vous permettraient de vous rapprocher plus facilement du résultat que vous recherchez. Malheureusement, vous perdrez la barre de menu fixe de Malaga.

Pourquoi ne pas laisser les images que vous avez attribuées à chaque page mais sans la deuxième image blanche en dessous ?

Ensuite, vous laissez le fond de contenu transparent avec l'aide du rouleau sur la page d'accueil...

Pour votre page de présentation et celles où vous voulez un fond blanc sous l'image, vous modifiez le HEAD de la page en mettant un fond de content blanc opaque...
Code:
<style type="text/css">
/*<![CDATA[*/
.content-options {background-color: white;}
/*]]>*/
</style>
Vous élargissez le background content blanc en pleine largeur... (Attention, il faudra centrer vos textes de contenu).

Ensuite, vous demandez à Fred le code pour agrandir l'espace entre la topbar et le content.. Ce sera nécessaire avec le design Malaga pour l'effet que vous souhaitez obtenir.

Il n'y aurait plus de problèmes d'incompatibilité selon les tailles d'écrans, et vos textes seraient toujours placés sur blanc ou toute couleur que vous souhaiteriez sous l'image...

Qu'en penses-tu Fred ?
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Mer 22 Juil 2015 - 16:00

Merci pour vos réponses, malheureusement maintenant j'ai un bandeau blanc qui se balade sur l'image !

C'était le but
après il faut affiner.

J'ai inséré le widget html ainsi que ce code dans le head :

<style type="text/css">
/*<![CDATA[*/
#bando
{background: #FFFFFF!important;
important n'est pas utile ici

position: relative;
left: -100%;
height: 300px;
width: 300%; }
/*]]>*/
</style>

J'ai même essayé avec   background-attachment: fixed; en plus mais ça me la fixe au milieu de l'image.
il n'y a pas de background, c'est la div entière qui sert de background


Quand vous dites "width: 300%; }
(ici, vous laissez le code déjà présent dans votre modifier le head)" vous parlez du code qui permet d'avoir une image par page?
Je parle de TOUT le code que vous avez déjà inséré en "modifier le HEAD".
Je n'ai pas regardé exactement à quoi il sert.
Vous devez avoir UNE SEULE déclaration de CSS : toutes les modifications entre les balises
Code:
<style type="text/css">
/*<![CDATA[*/
(ici le code)
/*]]>*/
</style>
L'intérêt est de d'avoir le moins possible de CSS.
il est possible aussi, depuis peu, de faire des modifications page par page, mais ce n'est pas indispensable.

Pour vous aider à positionner votre bandeau blanc, je vais voir sur la page…
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Mer 22 Juil 2015 - 16:11

Merci Solie, mais ta solution ne peut pas fonctionner : le fond blanc n'est pas sur tout le texte, juste une partie.
Il faut vraiment faire à partir d'une div indépendante.

FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Mer 22 Juil 2015 - 16:22

Il est possible aussi de "déplacer" un élément pour le mettre en arrière-plan :
Je prend le spacer qui est au dessus de votre présentation, je lui donne une couleur, je le met en arrière-plan par rapport à votre présentation, je le descend grâce à une position relative :
Code:
#cc-m-12233826922
{z-index:-1!important;
    background: #BBB;
position: relative;
    top: 351px;
left: -100%;
height: 340px;
width: 300%; }
Je ne peux pas voir le résultat si vous limitez l'accès aux pages, mais bon, l'idée est là.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par fofo34959 Sam 25 Juil 2015 - 10:08

Bonjour et merci pour vos réponses !

Solie : le changement de template est une bonne idée, j'ai testé d'autres templates (d'où l'accès bloqué à mon site) et finalement c'était pire, l'image était complètement coupée même en la mettant en cover, en essayant des pourcentages...

Du coup je suis revenue à mon design malaga et la solution de Fredvig est pas mal !

J'ai renoncé à mettre la div "bando" elle se baladait toujours et la taille était trop petite... mais ce code :

#cc-m-12233826922
{z-index:-1!important;
background: #BBB;
position: relative;
top: 351px;
left: -100%;
height: 340px;
width: 300%; }

fonctionne plutôt bien je trouve ! (j'ai changé la couleur en blanc bien sûr).

Maintenant le deuxième titre 'commençons par les présentations' est toujours sur la photo lorsqu'on le regarde depuis un smartphone mais le texte qui suit est bien sur un fond blanc !

Merci pour ce conseil, si je veux réduire l'écart entre le deuxième titre et le texte quelle valeur dois-je modifier ?

Je vais appliquer ce code aux autres pages, qui ont le même problème, mais par exemple pour la page 'prestations', ce n'est pas du texte qui dépasse sur l'arrière plan image, mais une image importée, je suppose donc que le code soit être modifié...

fofo34959

Messages : 21
Date d'inscription : 20/04/2015

http://citronfrappe.fr

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Sam 25 Juil 2015 - 23:26

Je propose juste un principe qu'il faut adapter.
Le mieux est d'essayer de bien comprendre comment "ça" fonctionne :

Code:
#cc-m-12233826922
Choisir un élément à déplacer (dans mon exemple, c'était un module d'espacement au dessus du texte)
Code:
background: #BBB;
Ensuite, lui donner une couleur,
changer sa place "d'empilement" (z-index)
(pour qu'il passe en dessous, "en arrière-plan" du texte)
Code:
{z-index:-1!important;
Le mettre en position relative (par rapport à son contenant supérieur)
Code:
position: relative;
top: 351px;
left: -100%;
indiquer le top de cette position (351px plus bas que sa position d'origine, moins 100% de la largeur de son contenant vers la gauche)
Code:
height: 340px;
width: 300%; }
Donner une hauteur et une largeur utiles

Pour les autres pages, il "suffit" de suivre le même principe, choisir un élément à déplacer etc.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Dim 26 Juil 2015 - 0:04

Merci pour ce conseil, si je veux réduire l'écart entre le deuxième titre et le texte quelle valeur dois-je modifier ?
L'élément que j'ai choisi de déplacer "repousse" le texte de la valeur de sa hauteur.
Le plus simple est - sans doute - de remplacer sa position relative en Top
(top:350px)
par une marge basse négative :
(margin-bottom:-350px)
Code annule et remplace le précédent
 
Code:
 #cc-m-12233826922
{z-index:-1!important;
background: #FFF;
position: relative;
margin-bottom:-350px;
left: -100%;
height: 340px;
width: 300%; }
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par FredVig Dim 26 Juil 2015 - 0:16

Maintenant le deuxième titre 'commençons par les présentations' est toujours sur la photo lorsqu'on le regarde depuis un smartphone mais le texte qui suit est bien sur un fond blanc !
Bien entendu, il est possible de "remonter" le fond blanc jusque derrière 'commençons par les présentations'
Il suffit de modifier les valeurs de height et mettre une valeur négative de margin-top:
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Position/taille arrière plan  Empty Re: Position/taille arrière plan

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Page 1 sur 2 1, 2  Suivant

Revenir en haut

- Sujets similaires

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