Wie gestalte ich ein Hintergrundbild für eine responsive Website?

Ich habe mich den ganzen Tag nach einer Antwort oder einer Anleitung umgesehen, aber ich kann anscheinend nichts finden. Vielleicht fehlt mir hier ein Schlüsselwort.

Ich habe eine einseitige Website, für die ich ein Hintergrundbild in Photoshop oder Illustrator entwerfen möchte. Ich möchte dieses Bild um die Elemente auf der Webseite herum gestalten können. Dies wäre nicht allzu schwer für eine bestimmte Bildschirmgröße zu entwerfen, aber die Positionierung von Elementen und die Breite des Bildschirms können sich von Gerät zu Gerät dramatisch ändern. Ich habe nur zwei Ideen, wie ich vorgehen soll, von denen keine wie eine gute Methode aussieht:

  1. Erstellen Sie ein Hintergrundbild, das Elemente auf der Seite ignoriert und rechts/links nicht zu viele Details aufweist, um auf Mobilgeräten abgeschnitten zu werden.
  2. Erstellen Sie für jede Gerätegröße ein separates Hintergrundbild und verwenden Sie Medienabfragen, um das richtige Bild zu laden.

Gibt es einen besseren Weg, dies zu tun?

Hier ist ein Beispiel dafür, wovon ich spreche:

Geben Sie hier die Bildbeschreibung ein

Antworten (2)

Ich denke, ideal für mobile Websites, die Sie eliminieren oder die Menge der geladenen Bilder reduzieren möchten, um die Ladezeit zu verkürzen und die Lesbarkeit zu verbessern.

Ich würde also Medienabfragen verwenden, aber nicht, um verschiedene Bilder für Mobilgeräte zu laden, sondern um überhaupt keine Bilder für Mobilgeräte zu laden . Ich würde mich eher an einfache CSS-gerenderte Farben oder Farbverläufe als an Bilder für eine mobile Website halten.

Wenn ich responsive Inhalte entwerfe, sehe ich das immer so:

  • Desktop: Alle Bilder, vollständiges Design
  • Tablet : Einige Bilder, ggf. Design vereinfachen
  • Telefon : Minimale Bilder, Design so weit wie möglich vereinfachen

Für mich ist das mobile Surfen viel mehr die Vermittlung von Informationen als das Zeigen aller Schnickschnack, die möglich sind. Ich möchte, dass Benutzer, die auf ihrem Telefon anzeigen, in der Lage sind, Informationen schnell und ohne Unordnung zu erhalten, da sie meistens mobil surfen und nicht irgendwo sitzen und Websites lesen.

Verwenden Sie CSS {background-size: cover} (Sie können auch mit der Position spielen)

Und ja, Sie können einige Medienabfragen verwenden, um einen anderen Hintergrund zu laden.

Wie gestalte ich ein Hintergrundbild für eine responsive Website?
AntwortenHierDatenschutz-Bestimmungen1y, 0v