Résolu Largeur affichage bannière header

Bonjour

Je suis encore sur mon header. Je n'arrive pas à rendre visible la totalité de ma bannière (image PNG)

Lorsque je vais à la pêche  je fais :

Header > format > Fonds > Obtenir les dimensions de l'élément : il m'est retourné 1874 px x 460 px alors que les dimensions de mon JPG sont de 800 px × 200 px !

Je vais voir sans Paramètres étendus :

Style : non répétée

Attachement : normal

Position : > définir une position exacte : X = 0 et Y = 0

Mon image (bannière) n'est pas visible sur une bonne partie droite. J'ai inspecté l'élément et je trouve dans le source 800 × 200.

Je voudrais savoir comment réduire la valeur de 1874 pour avoir une image qui entre en largeur.

Merci de votre aide

@lain

Bonsoir,

Je propose une solution acceptable à mes yeux, mais il y a probablement d'autres possibilités et ajustements possibles (la hauteur du header par exemple):

1) Dans le thème css, mettre les paramètres étendus de l'image:  Au centre

2) Ajouter dans le css :
#header {background-size: contain; }


contain  redimensionne l'image au max possible en  conservant les proportions. (Les espaces non remplis  font apparaitre la couleur de fond).

Bonne soirée.

Bonsoir et merci Stormalo

C'est très gentil, heureusement que tu es là pour repêcher les gens comme moi !

Je n'ai pas regardé sur un autre écran, mais je pense que ça devrait marcher car l'image s'est recalée.

@lain

PS : génial, je viens de tester sur mon autre écran et ça fonctionne ! Merci

Et heureusement qu'il y a de plus en plus la bonne doc sur internet, et que Firefox à des outils pour analyser et manipuler le code de la page affichée.

Pour ton cas je viens de m'aider de cette page:
https://developer.mozilla.org/fr/docs/Web/CSS/background-size

(je connaissais le mot background-size, pas le mot contain) 

PS: pense de mettre ce sujet comme étant RESOLU   si c'est vraiment OK

Bonjour Ptit randonneur, bonjour stormalo,

Au lieu de faire un ajout de codes pour résoudre ce problème, ne serait-il pas plus simple de supprimer ceux qui en sont à l'origine, à savoir cette ligne dans la feuille de style :

#header {width:99.5%; background-size:cover;}

Après suppression de celle-ci, la bannière reprend correctement sa place et sa dimension de 800px -> Copie d'écran.

C'était juste mon avis...

Cordialement. 

@Colette95

Bonjour,

C'est vrai qu'il vaut toujours mieux supprimer une cause que la recouvrir, je n'avais pas vu cette ligne css, mais au final le "contain" que j'ai indiqué à le mérite de ne pas déformer l'image tout en lui donnant une taille maxi.
Comme l'image contient du texte, la lisibilité est en générale meilleure

Quant au width: 99.5%, bof! il n'a rien à voir avec le problème signalé par Ptit Randonneur. Il détermine en % la largeur du header.

Perso, s'il y a quelque chose qu'il est souhaitable de supprimer dans ce que tu as signalé, car devenue inutile, c'est la partie que je marque en rouge.

#header {width:99.5%; background-size:cover;}

Au ptit rando de juger

Bonne suite.

Merci à toi aussi Colette,

Je suis heureux d'avoir ouvert un dialogue, je ne sais pas si je vais le mettre en "marqué résolu" car d'autres sont peut-être intéressés.

Oui Colette, je n'avais pas touché au header proprement dit.

Je suis ouvert à toutes les idées.

Merci à vous deux

Cordialement

@lain

Coucou,

juste par curiosité stormalo, tu dis "Quant au width: 99.5%, bof! il n'a rien à voir avec le problème signalé par Ptit Randonneur. Il détermine en % la largeur du header"

Or il me semble que c'est bien la largeur du header qui transformait automatiquement la largeur de l'image, non ? 
D'autant que tu suggères de supprimer (suite à l'ajout du contain j'imagine), dans le #header  le background-size: cover 
ce qui me fait dire qu'il y a bien une relation avec le codage header.

L'éditeur EB a l'avantage de pouvoir "cibler" et "régler" tout, assez précisément.
Il est vrai que jongler avec les proportions pour rendre un texte lisible sur une image, elle-même intégrée dans un header (image qui a des dimensions qui conviennent au texte et vice versa)  perso je ferai plus simple

salut pipiou

Or il me semble que c'est bien la largeur du header qui transformait automatiquement la largeur de l'image, non ?

L'élément div, id="header", n'agit pas la largeur de l'image, c'est l'image qui s'adapte à cet élément (selon la règle css prévue)

Pour adapter automatiquement l'image de fond au bloc qui la contient il y a deux mots clés cover et contrain ; le premier déforme l'image si nécessaire pour remplir le cadre, le second affiche l'image la plus grande possible sans jamais la déformer.

L'éditeur EB a l'avantage de pouvoir "cibler" et "régler" tout, assez précisément.

Lapsus je pense.  Tu sembles confondre Éditeur avec Formulaire de paramétrage du thème, lequel ne peut pas tout, et ne peut pas agir sur tout. (L'éditeur encore moins)

L'éditeur c'est  pour traduire en langage HTML  ce que l'humain rédige (avec quelques propriétés intégrées pour le style)
Les Formulaires de la barre menu, c'est pour paramétrer le blog et sa structure (par exemple le thème css)

Si tu peux faire plus simple avec un résultat similaire, je suis preneur de l'info.

Bonsoir à tous  !

Si je peux me permettre, je trouve dommage de rechercher des solutions dans le codage pour le placement d'une bannière alors qu'il serait tellement plus simple de l'intégrer à partir des paramètres dans la dimension requise.

Pour cela évidemment, il serait nécessaire d'harmoniser le paramétrage du blog en prenant une valeur de référence car actuellement, celui-ci est exprimé indifféremment en %, px et même vw.

Pour se rendre compte que ces valeurs ne font pas toujours bon ménage entre-elles, il suffit de zoomer ou dézoomer pour constater que les éléments se déplacent et donnent une vision plutôt "chaotique" du blog comme sur ces copies d'écran prises à 33% et 125%. 

C'était juste un avis perso... 

Bonne soirée, bon week-end et bonnes suites pour Ptit Randonneur.