bandeau image de fond avec texte à l'intérieur

[Patrick GOUJON]

Bonjour,

Je souhaiterai intégrer dans mon site : http://www.patrick-goujon.fr/  des bandeaux ( ou blocs ) de couleurs sur 100% de la largeur avec du texte et des liens à l’intérieure pour créer de vraies ruptures visuels. Pour mon exemple je ne vais pas aller chercher très loin en indiquant la page d’accueil du site Jimdo.fr. Faîtes défiler la page d’accueil et vous comprendrez ce que je souhaites.

je suis arrivé à mettre déjà une image en fond sur toute la largeur par l'utilisation du widget, cependant il m'est impossible d'écrire ensuite sur cette image de fond. j'ai quelques notion html/ CSS.

Je vous remercie d'avance

Patrick

[FredVig]

Ce sont des galeries d'images en mode slide qui sont mises en position relative, et dont les dimensions sont forcées sur la largeur de fenêtre. Le texte (+liens) passe par dessus. le mieux est sans doute de mettre texte et slide dans le m^me contenant, de donner une dimension 100% de la fenêtre à ce contenant, des dimensions proportionnelles et positions relatives au texte et au slide. Il faut également indiquer des valeurs différentes pour les diverses largeurs de fenêtre, par du javascript ou la balise @media.
Il est probable que certains designs offrent de meilleures souplesses à ces adaptation de code.

On doit pouvoir aussi créer un effet similaire en insérant une image d'arrière-plan pleine largeur, comme expliqué dans l'aide jimdo :
http://aide.jimdo.com/aller-plus-loin-avec-jimdo/cr%C3%A9er-un-effet-de-d%C3%A9filement-d-image/
, puis de changer cette image lorsque la page arrive à un certain défilement vertical.
un code jquery permet de surveiller le scroll afin de déclencher une nouvelle propriété, voir par exemple ici :
https://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css
en l'occurrence, le jquery déclenche la propriété "fixed" d'un menu lorsque la page défile au delà d'un certain point.

[Solie]

En ce qui concerne le bloc couleur en pleine largeur, vous pouvez faire ce genre de chose en agissant sur l'élément colonne.

Vous créez d'abord un élément colonne.
A l'intérieur, vous mettez à votre guise vos textes, boutons, etc.
Puis en modifiant le head, vous attribuez à vos colonnes une largueur de 100% ainsi qu'un background avec vos références #couleur.

Les explications détaillées d'Isa de Realia sont retransmises dans ce topic :
http://www.jimdoforum.fr/t820-resolu-bloc-colonne-en-pleine-largeur

[FredVig]

Réflexion faite, je pense que le plus simple dans votre cas est de suivre le tuto de Jimdo, et de ne pas mettre le background-attachment: fixed; Il suffit de recommencer pour chaque image de fond un nouveau module.

[Contenu sponsorisé]