[RÉGLÉ] image background responsive

[herbet]

Bonjour !
J'ai un petit soucis avec une image en background, que je souhaiterais rendre responsive. Actuellement, sur mobile/ipad, le rendu de l'accueil est affreux parce que cette image est remplacée par un truc noir
J'ai suivi les conseils de ce liens

http://css-tricks.com/perfect-full-page-background-image/

Mais le résultat est le même qu'au départ : l'image s'affiche très bien sans s'étirer, mais ça ne change rien au problème du mobile.
J'ai récupéré le code d'un slider responsive que j'ai sur le site, et j'ai essayé de l'affecter au fichier .css du background, mais ça n'a rien donné !
quelqu'un aurait-il une superbe idée ???

Merci d'avance !!

[Rajoz]

Re : image background responsive

Bonjour Herbet,

Le code CSS de css-tricks.com est le bon pour que l'image s'étire en fond de page. Perso, j'utilise un CSS3 avec background-size: cover; proche de celui indiqué sur ce site.

Si l'image est remplacée par du noir sur mobile ou iPad c'est peut-être parce que le template a prévu de ne pas mettre d'image sur les écrans de petite dimension en utilisant par exemple des CSS3 media queries. C'est parfois le cas pour ne pas alourdir le chargement de la page pour les mobiles par une grande image.

Sans le lien du site c'est difficile de voir se qui se passe.

Amicalement,
Rajoz

[herbet]

Re : image background responsive

Merci !
Euh... CSS3, je ne comprends pas comment ça se paramètre ça. Il faut une extension particulière ? (pardon si la question est idiote)

Normalement, mon template est parfaitement responsive. Mais dans sa forme originale, le support m'a indiqué qu'ils n'avaient pas prévu que l'image de background soit responsive. A la place, ils mettaient un module slider qui, lui l'était.

Mais ça n'est pas dans l'idée de mon site

https://www.cookzh.com

[toffffe]

Re : image background responsive

Ton site est ko en ce moment

Error displaying the error page: Application Instantiation Error

[toffffe]

Re : image background responsive

Euh... CSS3, je ne comprends pas comment ça se paramètre ça. Il faut une extension particulière ? (pardon si la question est idiote)

Les CSS3 sont la nouvelle génération de css, ils permettent d'aller plus loin avec des ombres, des angles, ...
Tu n'as rien a rajouter, tu as juste à les utiliser, par contre ce n'est pas forcément évident car ils ne sont pas compatible avec toutes les versions des navigateurs, donc il faut encore souvent utiliser des hack

[herbet]

Re : image background responsive

Merci pour vos réponses...
ça y est le site est de nouveau en ligne

[ghazal]

Re : image background responsive

Salut,

Tu n'as rien a rajouter, tu as juste à les utiliser, par contre ce n'est pas forcément évident car ils ne sont pas compatible avec toutes les versions des navigateurs, donc il faut encore souvent utiliser des hack

Je confirme à 150%. XD

Un site indispensable pour vérifier si tel ou tel navigateur supporte ou non cette nouvelle fonctionnalité CSS3 super chouette :

http://caniuse.com/

Exemple : flex et flexbox

http://caniuse.com/#search=flex

[herbet]

Re : image background responsive

Arf; voilà que ça devient trop complexe pour moi
en fait je voulais juste savoir comment rendre mon image de background responsive, car effectivement je m'étais aperçu que les codes de CSS permettent juste une meilleure navigation sur ordinateur.
J'ai vu une extension qui s'apelle joomla mobile. Est-ce que ça pourrait être utile ? Tout le site est responsive sauf cette fichue image !
Je viens déjà de planter mon site en essayant de modifier les css... je crois que je ne suis pas encore au point. Donc, voilà, si vous avez une solution je suis preneur !!

[lomart]

Re : image background responsive

Bonsoir,

Tu peux essayer mon module bgmax en mode cover.
Il évite de toucher aux css
Voila une doc rapide: http://lomart.fr/bgmax/actualite-doc...on-rapide.html

[herbet]

Re : image background responsive

j'ai également essayé de lire ça..

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

mais c'est un peu nébuleux;
J'ai reéssayé les différents codes, mais ce que ça change au mieux... c'est que ma page d'accueil est flinguée

[herbet]

Re : image background responsive

Alors j'ai effectivement installé bgmax. Mais franchement ça me semble de trop haut niveau. Dès le début, la phrase "une fois que vous avez isolé le sélecteur qui englobe le contenu de votre site" me met hors jeu )
Pourtant il a l'air super ton module

[herbet]

Re : image background responsive

Il y a aussi Joomla Mobile, mais je ne vois pas trop l'intéret d'avoir un template responsive dans ce cas....
Je suis sûr qu'il y a une solution dans les codages proposés par CSS trick; mais je suis trop manche pour la comprendre

[lomart]

Re : image background responsive

Dès le début, la phrase "une fois que vous avez isolé le sélecteur qui englobe le contenu de votre site" me met hors jeu )

Tant que tu ne pourra pas répondre à cette question, tu ne pourras rien faire ni avec bgmax ni encore moins en codant à la main.

Je viens de regarder ton site,
1/ bgmax ne convient pas car ce n'est pas le background du body qu'il faut adapter
2/ l'image que tu veux en responsive a un format paysage, il est impossible de la mettre en portrait sans couper le texte
Donc, il faut donc dissocier l'image du texte.
Je ne sais pas comment est construit ce template mais il faudrait mettre un module personnalisé en jsn-header-top avec le texte de la photo. Je crains qu'il faille toucher à l'index.php pour y arriver

[ghazal]

Re : image background responsive

Il y a qd même des petits réglages à faire.
- ton image est trop lourde, pres de 1 mo, et pourrait être moins large. De plis, cela ralentit le chargement de la page.
ton image, dimensions : 4896 × 3264
l'image du site de demo de ton template : 1922 × 1081
Tu peux te baser sur ces dimensions.

Ceci fait, dans custom.css :
cherche cette ligne et rajoute max-width: 100%;

@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-homepage #jsn-header-top {
background-size: auto 100% !important;
max-width: 100%;
padding: 70px 0 !important;
}
}

Ou au pire, tu rajoute une règle en dessous de .jsn-homepage #jsn-header-top:
.jsn-homepage #jsn-header-top img {max-width: 100%;}

Même chose pour un iPad et/ou une tablette:

*Landscape

@media only screen and (max-width: 1024px), (max-device-width: 1024px){
{}
}
* Portrait

@media only screen and (max-width: 768px), (max-device-width: 768px){
{}
}

[herbet]

Re : image background responsive

2/ l'image que tu veux en responsive a un format paysage, il est impossible de la mettre en portrait sans couper le texte
Donc, il faut donc dissocier l'image du texte.
Je ne sais pas comment est construit ce template mais il faudrait mettre un module personnalisé en jsn-header-top avec le texte de la photo. Je crains qu'il faille toucher à l'index.php pour y arriver

Ah ça peut expliquer pourquoi je n'ai jamais réussi à installer un module photo à cet endroit ?

Vu la photo il est difficile de la séparer du texte, car il n'y a de place pour le texte qu'en haut à droite....