Position/taille arrière plan
3 participants
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Autres fonctions Jimdo
Page 1 sur 2
Page 1 sur 2 • 1, 2
Position/taille arrière plan
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
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
Re: Position/taille arrière plan
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.
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.
Re: Position/taille arrière plan
Merci de votre réponse
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 ?
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 ?
Re: Position/taille arrière plan
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)
Re: Position/taille arrière plan
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...
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...
Re: Position/taille arrière plan
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
(Son numéro c'est #cc-m-12233827422)
Vous rajoutez du blanc en arrière plan
- Code:
#cc-m-12233827422 {background: white;}
Re: Position/taille arrière plan
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...
<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...
Re: Position/taille arrière plan
Cela ne donnera rien de mieux.
Il faut un élément "fond" qui soit séparé du background.
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
Il faut un élément "fond" qui soit séparé du background.
Le soucis vient sans doute du fait que vous ne préfigurez pas exactement ce que vous voulez obtenir.Cela donne en effet un fond blanc au texte mais ce n'est pas l'idéal...
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
Re: Position/taille arrière plan
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.
Donc, il faut assurer une bonne lisibilité indépendamment du background.
Re: Position/taille arrière plan
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.
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.
Re: Position/taille arrière plan
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
Fond blanc, position relative, left: -100%, largeur… grande ! : 300%, hauteur grande aussi. il faudra aussi peut-être modifier son Zindex
Re: Position/taille arrière plan
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 ?
<style type="text/css">
/*<![CDATA[*/
body {background: #FFFFFF; !important;
height: 300%; !important;
width: 300%; !important;
background-position: left: -100%;!important; }
/*]]>*/
</style>
Le Zindex ?
Re: Position/taille arrière plan
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>
<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>
Re: Position/taille arrière plan
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 ?
Est ce que vous voyez une erreur dans mon code ?
Re: Position/taille arrière plan
EN fait, c'est plus simple :
Vous écrivez directement en html dans un module html, genre :
par exemple :
<style type="text/css">
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;
Vous écrivez directement en html dans un module html, genre :
- Code:
<div id="bando"></div>
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>
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;
Re: Position/taille arrière plan
Et background: #FFFFFF !important; et pas background: #FFFFFF; !important;
Non ?
Non ?
Re: Position/taille arrière plan
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?
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?
Re: Position/taille arrière plan
Sur petit écran, type iPad, ça fonctionne
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...
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 ?
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>
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 ?
Re: Position/taille arrière plan
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.
important n'est pas utile iciJ'ai inséré le widget html ainsi que ce code dans le head :
<style type="text/css">
/*<![CDATA[*/
#bando
{background: #FFFFFF!important;
il n'y a pas de background, c'est la div entière qui sert de backgroundposition: 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.
Je parle de TOUT le code que vous avez déjà inséré en "modifier le HEAD".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 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>
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…
Re: Position/taille arrière plan
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.
Il faut vraiment faire à partir d'une div indépendante.
Re: Position/taille arrière plan
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 :
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%; }
Re: Position/taille arrière plan
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é...
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é...
Re: Position/taille arrière plan
Je propose juste un principe qu'il faut adapter.
Le mieux est d'essayer de bien comprendre comment "ça" fonctionne :
changer sa place "d'empilement" (z-index)
(pour qu'il passe en dessous, "en arrière-plan" du texte)
Pour les autres pages, il "suffit" de suivre le même principe, choisir un élément à déplacer etc.
Le mieux est d'essayer de bien comprendre comment "ça" fonctionne :
- Code:
#cc-m-12233826922
- Code:
background: #BBB;
changer sa place "d'empilement" (z-index)
(pour qu'il passe en dessous, "en arrière-plan" du texte)
- Code:
{z-index:-1!important;
- Code:
position: relative;
top: 351px;
left: -100%;
- Code:
height: 340px;
width: 300%; }
Pour les autres pages, il "suffit" de suivre le même principe, choisir un élément à déplacer etc.
Re: Position/taille arrière plan
L'élément que j'ai choisi de déplacer "repousse" le texte de la valeur de sa hauteur.Merci pour ce conseil, si je veux réduire l'écart entre le deuxième titre et le texte quelle valeur dois-je modifier ?
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%; }
Re: Position/taille arrière plan
Bien entendu, il est possible de "remonter" le fond blanc jusque derrière 'commençons par les présentations'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 !
Il suffit de modifier les valeurs de height et mettre une valeur négative de margin-top:
Page 1 sur 2 • 1, 2
Sujets similaires
» Modifier la position de l'image en arrière-plan
» modifier la taille de l'arrière plan
» quelle taille pour l arriere plan
» Taille de l'image d'arrière plan (design Rome)
» L'arrière plan ne s'affiche PLUS
» modifier la taille de l'arrière plan
» quelle taille pour l arriere plan
» Taille de l'image d'arrière plan (design Rome)
» L'arrière plan ne s'affiche PLUS
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Autres fonctions Jimdo
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|