@@Matse:

nuqneH

Ich habe mal mit zwei übereinander liegenden Hintergrundbildern experimentiert und ich bin BEGEISTERT! Das Ergebnis jetzt ist ja noch viel genialer als meine ursprüngliche Idee!

Das ist jetzt als erstes HG-Bild ein radial-gradient() und darüber ein zweites HG-Bild

Jetzt? Nö. Jetzt ist nur ein Hintergrundbild. radial-gradient ist auskommentiert.

Im Übrigen in dein Markup kaputt. (Einfach mal den Validator fragen.) ul darf nur li enthalten, nicht h1 und h2.

Das Logo sollte auch nicht in h1 stehen (sondern gar nicht als Überschrift) und die eigentliche Überschrift nicht in h2 (sondern in h1). Oder Logo und Text zusammen in ein h1-Element. h1 gefolgt von h2 ist jedenfalls falsch.

Das Logo-Bild ist viel zu groß. 910 × 876 Pixel ist wohl etwas zu viel des Guten, Retina-Auflösung sollte genügen. 140 Kilobyte sind definitiv zu viel. So viel Bildinformation steckt da nicht drin, wie hast du es geschafft, dass das PNG so riesig ist? PNG-24? Es sollte PNG-8 sein.

Noch sinnvoller aber SVG. Du hast das Logo mit einem Grafikprogramm erstellt, aus dem du es als Vektorgrafik speichern kannst? Für alte Browser noch PNG als Fallback, aber in der tatsächlich angezeigten Größe, also 208 × 200 Pixel.

Auch die 170 Kilobyte für die Sonne ist viel zu viel. Muss es Tranzparenz sein? Kann das Orange nicht mit ins Bild? Für diesen Bildinhalt wäre JPEG das richtige Grafikformat.

Qapla'