Background intelligent en CSS - Pb Chrome par Babord - page 1

Hello,

J'ai trouvé un tuto sur Alsacréations pour réaliser un background intelligent en CSS, on le retrouve également un peu partout sur le web..

je ne vous met pas de lien car le forum m'a effacé mon post il y a quelques minutes pour cause de spam

Ma foi c'est assez simple à mettre en œuvre...

Dans ce tuto ils proposent également de faire ce background en utilisant Jquery mais je ne souhaite utiliser que du CSS.

Ci joint le code HTML et CSS pour ceux qui voudraient essayer,

j'en suis désolé mais idem que plus haut, je ne vous mettrai pas le lien de la page Code Pen où j'ai essayé...

HTTP

<body>
<p>MAÎTRE DE MUSIQUE, MAÎTRE À DANSER, TROIS MUSICIENS, DEUX VIOLONS, QUATRE DANSEURS.

MAÎTRE DE MUSIQUE, parlant à ses Musiciens.- Venez, entrez dans cette salle, et vous reposez là, en attendant qu’il vienne.

MAÎTRE À DANSER, parlant aux Danseurs.- Et vous aussi, de ce côté.

MAÎTRE DE MUSIQUE,à l’Élève.- Est-ce fait ?

L’ÉLÈVE.- Oui.

MAÎTRE DE MUSIQUE.- Voyons... Voilà qui est bien.

MAÎTRE À DANSER.- Est-ce quelque chose de nouveau ?

MAÎTRE DE MUSIQUE.- Oui, c’est un air pour une sérénade, que je lui ai fait composer ici, en attendant que notre homme fût éveillé.

MAÎTRE À DANSER.- Peut-on voir ce que c’est ?

MAÎTRE DE MUSIQUE.- Vous l’allez entendre, avec le dialogue, quand il viendra. Il ne tardera guère.

MAÎTRE À DANSER.- Nos occupations, à vous, et à moi, ne sont pas petites maintenant.

MAÎTRE DE MUSIQUE.- Il est vrai. Nous avons trouvé ici un homme comme il nous le faut à tous deux. Ce nous est une douce rente que ce Monsieur Jourdain, avec les visions de noblesse et de galanterie qu’il est allé se mettre en tête. Et votre danse, et ma musique, auraient à souhaiter que tout le monde lui ressemblât.

MAÎTRE À DANSER.- Non pas entièrement ; et je voudrais pour lui, qu’il se connût mieux qu’il ne fait aux choses que nous lui donnons.

MAÎTRE DE MUSIQUE.- Il est vrai qu’il les connaît mal, mais il les paye bien ; et c’est de quoi maintenant nos arts ont plus besoin, que de toute autre chose.

MAÎTRE À DANSER.- Pour moi, je vous l’avoue, je me repais un peu de gloire. Les applaudissements me touchent ; et je tiens que dans tous les beaux arts, c’est un supplice assez fâcheux, que de se produire à des sots ; que d’essuyer sur des compositions, la barbarie d’un stupide. Il y a plaisir, ne m’en parlez point, à travailler pour des personnes qui soient capables de sentir les délicatesses d’un art ; qui sachent faire un doux accueil aux beautés d’un ouvrage ; et par de chatouillantes approbations, vous régaler [1] de votre travail. Oui, la récompense la plus agréable qu’on puisse recevoir des choses que l’on fait, c’est de les voir connues ; de les voir caressées d’un applaudissement qui vous honore. Il n’y a rien, à mon avis, qui nous paye mieux que cela de toutes nos fatigues ; et ce sont des douceurs exquises, que des louanges éclairées.

MAÎTRE DE MUSIQUE.- J’en demeure d’accord, et je les goûte comme vous. Il n’y a rien assurément qui chatouille davantage que les applaudissements que vous dites ; mais cet encens ne fait pas vivre. Des louanges toutes pures, ne mettent point un homme à son aise : il y faut mêler du solide ; et la meilleure façon de louer, c’est de louer avec les mains [2] . C’est un homme à la vérité dont les lumières sont petites, qui parle à tort et à travers de toutes choses, et n’applaudit qu’à contre-sens ; mais son argent redresse les jugements de son esprit. Il a du discernement dans sa bourse. Ses louanges sont monnayées ; et ce bourgeois ignorant, nous vaut mieux, comme vous voyez, que le grand seigneur éclairé qui nous a introduits ici.

MAÎTRE À DANSER.- Il y a quelque chose de vrai dans ce que vous dites ; mais je trouve que vous appuyez un peu trop sur l’argent ; et l’intérêt est quelque chose de si bas, qu’il ne faut jamais qu’un honnête homme montre pour lui de l’attachement.

MAÎTRE DE MUSIQUE.- Vous recevez fort bien pourtant l’argent que notre homme vous donne.

MAÎTRE À DANSER.- Assurément ; mais je n’en fais pas tout mon bonheur, et je voudrais qu’avec son bien, il eût encore quelque bon goût des choses.

MAÎTRE DE MUSIQUE.- Je le voudrais aussi, et c’est à quoi nous travaillons tous deux autant que nous pouvons. Mais en tout cas il nous donne moyen de nous faire connaître dans le monde ; et il payera pour les autres, ce que les autres loueront pour lui.

MAÎTRE À DANSER.- Le voilà qui vient.</p>

</body>

CSS

body {
  background:
url("http://travelhdwallpapers.com/wp-content/uploads/2017/03/Chicago-Wallpaper-3.jpg")no-repeat center fixed;
  -webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */ 
}

p { font-size: 400%;
}

Sous Firefox cela marche au poil ; on peut agrandir, réduire la fenêtre et scroller, le background "s'étend" et est toujours présent.

Par contre j'ai un soucis de compatibilité sous Chrome lorsque l'on scroll vers le bas, le background disparait.

Le problème vient du center fixed, si on l'enlève l'image devient immense et l'on perd la joie de utilisation de ce petit trick qui rend la page sympa lorsque qu'on fait du responsive design.

Quelqu’un aurait il une solution relativement simple pour utiliser et rendre compatible au plus grand nombre ce type de background en css ?

Merci

Background intelligent en CSS - Pb Chrome

Background intelligent en CSS - Pb Chrome

Supprimer

Modérer

Signaler le message aux modérateurs