Arriere plan incurvé sur design fluide

Bonjour,

je dois intégrer un design fluide (100% de largeur de l'écran), la maquette prévoit un arrière plan incurvé comme vous pouvez le voir ci-dessous.



J'ai bien sur la solution de dire "m'en fout, j'shuis un warrior, vais faire une image de 3000px de large centrée ça passera toujours" mais c'est sale et lourd et un jour il y aura bien qq'un avec un écran de 3500px qui dira que c'est moche.

donc ma question est y a t il un moyen de faire ça proprement ?

Merci d'avance

Toute une question, j'aurait de la difficulté à faire ceci ^^

À première vu ce que je ferait est de me créer trois images (droite, gauche et un background avec aucune forme droite qui irait au centre). Donc, lorsque l'écran s'agrandirait, l'image de droite et gauche resterait collé sur leurs côté respectif pour laisser voir le milieu qui serait droit.

Je ne sais pas si je me fait bien comprendre, et aussi si ça pourrait te convenir (vu que ça ne serait pas continu si on veut).

CSS media queries ?

Flink a écrit :
Toute une question, j'aurait de la difficulté à faire ceci ^^

À première vu ce que je ferait est de me créer trois images (droite, gauche et un background avec aucune forme droite qui irait au centre). Donc, lorsque l'écran s'agrandirait, l'image de droite et gauche resterait collé sur leurs côté respectif pour laisser voir le milieu qui serait droit.

Je ne sais pas si je me fait bien comprendre, et aussi si ça pourrait te convenir (vu que ça ne serait pas continu si on veut).

Oui j'ai compris ce que tu veux dire, plus l'écran serait large et plus la courbe serait plate en bas. En fait là le design veut que la courbe commence au milieu de l'écran et se continue jusqu'au bord.
En y réfléchissant ce design ne peut pas fonctionner car si l'écran fait 3m de large la courbe va toucher le haut du site à un moment il faudra bien qu'elle devienne plate.

Vincent Valentin a écrit :
CSS media queries ?

oui ça peut éviter de charger une grosse image sur les écrans normaux, sur les gros le problème restera le même tôt ou tard quelqu'un aura un écran plus large que l'image max prévue.

Merci pour vos suggestions

Je ne saurais pas le faire, mais dans l'idéal je verrais bien ça en SVG ou avec une utilisation très judicieuse (à la limite du hack) de la propriété border-radius.

Sinon oui, des media queries avec différentes tailles et différentes courbures suivant la largeur de l'écran, ça parait le plus réalisable.
Modifié par BlueScreenJunky (15 Aug 2012 - 08:29)

Une solution simple serait d’utiliser la propriété background-size:cover.

Ses défauts : pas compatible avec ie8 et le redimensionnement des images par les navigateurs donne parfois des effets d’escaliers.
Modifié par adrien881 (15 Aug 2012 - 10:16)

- Le background-size:cover sur ce type d'image ça va probablement être assez crade.
- Une seule très large image oui ça marche, mais c'est lourd.
- Plusieurs images de largeurs différentes + des Media Queries, ça peut être pas mal mais ça démultiplie la charge de travail. (Il faudra aussi vérifier comment ça se comporte côté performances, éviter le chargement de deux images différentes par les navigateurs par exemple.)
- En SVG ça serait idéal, mais IE 7-8 vont pas trop aimer.