[Problème] Rendre mon bandeau web responsive

[olef]

Bonjour,
J’utilise la dernière version de Joomla 3.4.8, le Template Yougrids et le Framework YJSG v2.2.2.
Et le but recherché pour mon nouveau site web est de le rendre un maximum web responsive.

J’ai mon logo en format png (classique) et pour mon bandeau (la-aussi c’est du grand classique) j’ai positionné une image en format jpg de la taille de ma page soit 1200x105

Je souhaiterais rendre mon image web responsive. En effet, quand je réduis ma page via Firefox, cela tronque mon image et cela devient noir, ce qui est logique bien évidemment.

Y aurait-il une solution svp, de rendre cette image web responsive ? Faut-il modifier mon fichier CSS
Yougrid/css/metal.css
Et cette partie :

#header {
background:#212121 url(../images/metal/header_bg.jpg) no-repeat left top;
}
#logo {
background:url(../images/metal/logo.png) no-repeat 0px 0px;
}


Bien sur, avant de poser ma question j’ai fait une recherche sur le forum et je suis tombé sur cela :

La définition CSS3 basique d'une image responsive est :
img {
width: auto;
max-width: 100%;
height: auto;
}


Si c’est cela, je ne vois pas trop comment modifier mon #header ?

Mais, peut-être existe t-il un composant qui permet de rendre mon bandeau web responsive ? Je vous remercie d’avance pour votre aide.
Cordialement.

[jisse03]

Re : Rendre mon bandeau web responsive

Bonjour,

YJSG est un excellent framework générant du code très propre et compact.

Utiliser les media queries serait un plus http://www.alsacreations.com/article...a-queries.html. Exemple

@media only screen and (max-width: 800px) {

    #header{
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}

Appliquer ces modifications soit via custom.css, soit surectement dans la page code personnel du gestionnaire de template

[olef]

Re : Rendre mon bandeau web responsive

Bonjour,
Et un grand merci jisse03

J'ai pas mal été pris et je n'avais pas eu temps de voir cette config. Je m'y remets.
J'ai donc appliqué votre solution, dans mon fichier metal.css :

#header {
background:#212121 url(../images/metal/header_bg.jpg) no-repeat left top;
width: 100%;
height: auto;
background-size: 100% auto !important;


et cela a modifié très légèrement l'affichage. Malheureusement, cela ne s'est pas mis à la taille d'une tablette et encore moins à la taille d'un Smartphone. Je me suis peut-être compliqué la tâche, à moins d'avoir une autre solution.
Je vais essayer cela :

img {
width: auto;
max-width: 100%;
height: auto;
}

ou cela :

#header {
background:#212121 url(../images/metal/header_bg.jpg) no-repeat left top;
width: auto;
max-width: 100%;
height: auto;
background-size: 100% auto !important;


Mais si vous voyez mieux, ou des éléments à rectifier....
Avec tous mes remerciements pour votre aide et de m'avoir très gentiment répondu.
Cordialement.

Olef

[jisse03]

Re : Rendre mon bandeau web responsive

Je viens de remarquer que tu utilises YouGrigs, qui est un template basé sur le très ancien YJSG 1.0, alors que mes réponses touchent YJSG version 2 (ce n'est pas YouGrids qu'il te faut dans ce cas comme template de base, mais Eximium).

[olef]

Re : Rendre mon bandeau web responsive

Tout à fait ! J'utilise Yougrids et non Eximium. La personne qui m'a demandé de faire leur site le préfère à Eximium. Moi aussi, j'aurais préféré utiliser la version 2 de YJSG, mais je n'ai pas pu.
Néanmoins, c'est vrai c'est un très beau Framework, et j'ai quasiment terminé mon site avec ce Template Yougrids. Basculer maintenant sous Eximium me fait un peu peur surtout que j'ai pas mal modifié un certains nombre de fichier de format css.
Il me reste maintenant qu'à assigner sur un autre endroit du site et me diriger vers un blog.
Je pense qu'il faut adapter un nouveau Template Web responsibe.... et si vous avez une petite idée d'un Template de format Blog (s'il s'agit bien sur de la meilleure solution ?).
Merci encore, et jespère à bientôt.

[jisse03]

Re : Rendre mon bandeau web responsive

Essaies pour le header

#header {
    background:#212121 url(../images/metal/header_bg.jpg) no-repeat left top;    
    background-repeat:no-repeat;
    background-size:contain;
}

Pour la section blog, soit un autre template (mais attention à ne pas mélanger du YJSG 1 et 2, tu risquerais des conflits), soit plus simplement, puisque tu commences à maîtriser YouGrids, à réaliser une variation.