- Statut : non résolu
- Ce sujet contient 60 réponses, 5 participants et a été mis à jour pour la dernière fois par
, le il y a 8 années et 11 mois.
-
Messages
-
C’est l’image d’arrière plan qui remplace le traditionnel fond blanc sur lequel on écrit en noir, regardez ce tuto, vous comprendrez mieux (en plus, c’est exactement votre problème !) : Un arrière-plan extensible intelligent
ouistiti.net wrote:C’est normal vu que c’est du parallaxe …Je ne savais pas ! On ne peut pas avoir d’image d’entête avec une page parallax ?
Voici un tuto qui explique le principe : http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html
Il est possible de le faire en CSS ou en JS
Il/elle n’utilise pas correctement son thème …
Oui, il faut l’utiliser avec parcimonie pour éviter des pages trop lourdes. Par contre, il est difficile de gérer le background (image ratio) en media queries.
Il/elle n’utilise pas correctement son thème …
Qu’est ce que je fais de mal ?
J’ai bien fait en sorte de suivre les tutos du Thème et je voulais juste que cette image puisse aller sur mon thème de façon homogène sur tous les écrans. Mais si je n’ai pas bien utilisé mon thème j’aimerais pouvoir le faire de la meilleure des manières possible.
En tout cas merci pour le tuto je vais l’essayer de suite pour voir si cela marche.
Je tiens à préciser qu’on ma dit que c’était une image en background mais que dans le thème l’image est appelé « hero » et non pas « background » qui est une autre image qui vient se mettre en fond du thème…
J’arrive à modifier la taille de l’image et son affichage en modifiant la ligne CSS :
#hero-header {
height: 780px;
width: 100%;
margin:0;
padding:0;
background: http://maisonmedicaleantibes.com/wp-content/uploads/2016/01/aaa-copie.jpg no-repeat center fixed;
}
position: relative;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;Mais je n’arrive pas à faire en sorte qu’elle s’affiche entièrement partout
Votre code, je l’ai déjà consulté via firebug.
Vous n’avez rien fait de mal, j’ai juste mentionné que vous ne l’utilisez pas à bon escient.
Votre thème se compose de plusieurs emplacements (zones) avec les éléments suivants :
1. Logo
2. Menu
3. image (background)
5. Texte (s)Pour tous ces emplacements où se situent les éléments mentionnés ci-dessus, vous les rassemblez en une seule image (1 unité au lieu de 5). Pour une question de lisibilité en « responsive », essentiellement pour les petits écrans, je préconise de garder chaque entités bien distingues et séparées (via le CSS).
Après en ce qui concerne l’homogénéité de votre image, cela n’est pas concevable dans ce cas de figure. C’est bel et bien un background. » hero-header » est le nom de la class.
Pour preuve :
Il faut apprendre les bases du CSS3, si vous désirez modifier (personnalisation) votre thème à votre convenance. De nombreux tutos sont à disposition sur le web.
Voili voilà !!
Ok merci pour cette explication. Par contre ce que je ne comprends pas c’est que je ne désir par « personnaliser » ce thème à ma convenance, je souhaite juste faire ce qu’il est marqué qu’on peut faire avec ce thème. C’est à dire avoir une image qui s’adapte à tous les écrans sans que ce soit tout dégueu comme ça l’est actuellement.
Et ça malheureusement, personne n’a encore réussi à savoir d’ou ça venait ..
Quelle solution ais-je ?
J’ai bien remis le code CSS qu’il y avait au tout début, à savoir :
}
#hero-header {
width: 100%;
height: 750px;
position: relative;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}Bonjour.
J’ai réussi à rendre l’image responsive, mais j’ai tellement » bidouillé » dans le code que je ne sais plus comment c’était à l’origine.
Le code
Essaies de t’en sortir avec ça.
🙂
Woaou super merci d’avoir chercher aussi longtemps.
Bon l’image semble adapter sa largeur à l’écran puisque sur mon téléphone la largeur est bonne mais l’image et toute compressé et garde une hauteur beaucoup trop haute.
« Je pense » que si on mettait height 100% ça résoudrait tout mais quand je le fais, ça supprime l’image.
Du coup la hauteur ne s’adapte pas aux écrans, il n’y a que la largeur qui fonctionne très bien.
Merci encore ! J’espère qu’on touche au but
REctification : maintenant quand je mets 100% en height elle s’affiche dans un bandeau de la taille du « padding ».
Si je modifie le padding, elle devient de nouveau moche sur téléphone c’est à dire compressé !
- Vous devez être connecté pour répondre à ce sujet.