Image dans le header non responsive sous AwesomeBB

[Yody]

Bonjour,

je viens de migrer mon tout nouveau forum sous AwesomeBB parce qu'AwesomeBB est responsive.

Je ne réussis pas à placer mon image dans le header de façon à ce qu'on la voit comme il faut. Le responsive c'est pire. Je viens de passer pas mal de temps à tester les balises css que je connais.

Code:

/*image dans le header--------------------------------------------------------------------------------------------------*/
#header-banner {
   background-color: #a1ecfd;
 background-image: url(https://i.servimg.com/u/f28/20/13/11/06/header12.png);             /*2000x350px*/
   width: 100%;                                                                             /*non responsive mais parfait sur desktop*/
  
}
/*description header banner transparent, garde le recensement actif-----------------------------------------------------*/
#header-banner > div > h2 {
   opacity: 0 !important;
}

L'image est gigantesque sur un cellulaire et elle déborde sur desktop.
J'ai fait tous les essais possibles mais je suis à l'écoute de vos suggestions pour rendre l'image correct ET responsive.
Elle semble un peu fluide mais ça s'arrête là.

Merci à l'avance
Voici l'adresse de mon forum, je sais, c'est coloré,

Si ma question n'est pas clair, ça va me faire plaisir de répondre à vos questions pour trouver l'erreur.

[Invité]

Bonjour, vous pouvez modifier le css comme ceci :

Code:

 #header-banner {background-color: #ededed;
height: 500px!important;
background-image:url('https://i.servimg.com/u/f28/20/13/11/06/header12.png');
background-size:auto,100%;
background-position: center;
}
 

Vous pouvez augmenter ou réduire la hauteur en modifiant la valeur du height.

[Yody]

Bonjour Surricate,

J'ai utilisé votre code et sur desktop, il fonctionne très bien sur Opera, Chrome et Edge.

Mais sur mon cellulaire, il ne fonctionne pas ni sur Opera ni sur Chrome. J'ai nettoyé l'historique et rien n'y fait.

Si vous ou quelqu'un avez des pistes de recherche pour rendre le header responsive, je suis preneur.
Merci pour votre message

[Yody]

Bon, j'ai modifié le code de @Surricate comme ceci et ça fonctionne sur ordinateur de bureau et c'est responsive.
La hauteur de la bannière est parfaite sur bureau mais sur mobile ce n'est pas tout à fait ça, mais c'est acceptable.
J'ai testé pour les différents mobiles dans Les Outils du Développeur et ça passe pour les mobiles.

Aussi, j'ai deux écrans et lorsque "j'étire" la fenêtre de mon navigateur sur les deux écrans, le bas de l'image disparaît.
Est-ce normal?
Mes écrans: 1920x1080 et 1920x1200.
Je m'inquiète que sur des écrans à plus hautes résolutions ça ne passe pas bien.

Code:

/*image dans le header fonctionne sur desktop et sur mobile. Sur mobile c'est pas parfait mais ça fonctionne-----*/
#header-banner {
 background-color: #a1ecfd;
 /*height: 350px;*/
 background-image: url('https://i.servimg.com/u/f28/20/13/11/06/header12.png');
 background-size: /*auto,*/ 100%;
 background-position: center;
}

En gardant height à 350px et background-size à auto, l'image débordait. C'est la raison pour laquelle j'ai retiré.

[Yody]

Rebonjour,

Le code est stable, il n'y a eut aucune mauvaise surprise.

Il y a juste un détail c'est lorsque j'étire la fenêtre de mon navigateur sur deux écrans et bien l'image disparaît progressivement.

Si quelqu'un ayant un écran haute résolution passe par ici, pourrait-il (ou elle) tester sur son écran si ça fonctionne bien?
Merci.

[Yody]

Et bien, d'insérer une image pour qu'elle soit responsive, dans le header avec AwesomeBB, c'est pas rigolo. 
J'ai pris la décision de ne pas en mettre. J'ai essayé plusieurs méthodes et plusieurs code css pour le faire sans résultat efficace.

Un jour peut-être que cela deviendra facile, les programmeurs devraient nous donner une méthode simple pour y parvenir. 
Le problème n'est pas résolu mais je baisse les bras, la fatigue sûrement. 
Une pause s'impose.
@+

[Chacha]

Message par Yody Hier à 12:01
Message par Yody Hier à 13:19
Message par Yody Hier à 17:18
Message par Yody Aujourd'hui à 2:19

Bonjour,

Merci d'éviter les double-posts en moins de 24h, (ici un quadruple-post !), pensez à cliquer sur le bouton dans votre dernier message pour y ajouter une information.

Je vous invite à lire :

- Règles générales du forum
- Charte de ce forum

Cordialement.

[Yody]

Alors voilà, je vais mettre un terme à ma requête mais je ne peux mettre résolu car nous ne trouvons pas de solution.
Je laisse aux soins des modérateurs la tâche de classer mon sujet.
Merci d'avoir tenté de résoudre le mystère.

À la prochaine