Background redimensionnable

Je me lance sur un design fluide un redimensionnement, le but du site est qu'il n'y ai pas de scroll sur petit écran..
Mais sur le background du slider impossible de régler la hauteur en auto.. :
http://www.couleursdelorient.com/



L'élément étant appelé en js, il a une hauteur par défaut...
Voici le css :

.pic {
background-repeat: no-repeat !important;
background-size: contain !important;
max-width: 1700px !important;
min-width: 900px !important;
width: 100% !important;
}

j'ai essayé, min-height et max-height, height auto, height 100%...background-size: 100%...je n'ai plus d'idée...

magali_infographiste a écrit :
L'élément étant appelé en js, il a une hauteur par défaut...
Voici le css :

.pic {
background-repeat: no-repeat !important;
background-size: contain !important;
max-width: 1700px !important;
min-width: 900px !important;
width: 100% !important;
}

j'ai essayé, min-height et max-height, height auto, height 100%...background-size: 100%...je n'ai plus d'idée...

Sérieux ton CSS…
- laisse tomber les !important, essaye de corriger le problème au lieu de passer par dessus;
- width: 100% -> laisse tomber direct ça;
- tu pars dans tout les sens. C'est ta déclaration background-size: contain qui empêche le comportement normal, toutes les autres ne servent à rien;
- tu as deux slider l'un sur l'autre.

Si j'étais toi je recommencerai, autant de code pour un slider ça fait peur.

Edit : bref supprime toutes ces déclarations et ça fonctionne.
Modifié par Gili (13 Nov 2012 - 15:38)

Merci pour ta réponse,
le but est que les images de mon slider se redimensionne...
si je ne mets pas de !important, c'est la taille de l'image qui prime (element-style)...si je ne mets pas background-size:contain ni width:100% l'image ne se redimensionne pas...
je sais que ce slider est compliqué, mais c'est le seul que j'ai trouvé avec 2 temps pour l'animation...le code est d'autant plus compliqué que je suis sur un CMS qui complique le code....

Mais merci quand même pour ces gentilles explications...ça fait toujours plaisir d'essayer d'apprendre...

Tu peux, en plus de supprimer les lignes précédentes mettre :

img {
max-width: 100%
}

magali_infographiste a écrit :
Mais merci quand même pour ces gentilles explications...ça fait toujours plaisir d'essayer d'apprendre...

Mais avec plaisir, même si je me doute de l'ironie de la remarque, avec plaisir quand même

Ce ne sont pas des images mais des background....

Autant pour moi. Que dirais-tu d'utiliser la propriété background-size:cover dans ce cas ?

(J'aurai bien testé en direct mais tu as mis un .htaccess ^^).

Non, avec cover, elle ne se redimensionne pas du tout

Bonjour,
ce slider pourrait peut-être répondre à tes besoins?
http://www.pixedelic.com/plugins/camera/

De rien.
Bon courage pour l'intégration.