web-dev-qa-db-fra.com

Stratégies d'image de fond pour un fond incurvé

Comment géreriez-vous une image de fond pour une page Web avec une courbe comme celle ci-dessous? Normalement, je prends une image fine et la répète le long de l'axe des x, mais la courbe nie cette stratégie car un côté est plus bas que l'autre. Idéalement, j'aimerais que les lignes continuent sur leur chemin actuel (même sur des moniteurs plus grands) sans avoir à utiliser une image énorme pour le tout. Des astuces ou des suggestions pour le faire d'une manière qui ne tue pas la taille de ma page?

Curved background

2
Virtuosi Media

Une solution laide à laquelle je peux penser maintenant est de créer un div positionné absolu dans le coin supérieur droit de la page. Largeur de 50%, couleur de fond gris. Au milieu se trouve votre fond. Vous pouvez utiliser une autre division pour définir l’arrière-plan de l’autre côté pour plus de cohérence, mais il est beaucoup plus facile de définir l’arrière-plan approprié pour votre body.

Vous pouvez améliorer cette technique en utilisant plusieurs arrière-plans (http://techknack.net/css-trick-two-background-images/) en éliminant le besoin de div, mais en introduisant des images en mosaïque.

1
Chris Hasiński