Etliche RapidWeaver-Vorlagen haben großflächige Hintergrundbilder, die sich abhängig von der Browserfenstergrösse proportional verändern. Derartiges lässt sich auch "zu Fuß" und ganz ohne Stack umsetzen - und das ist gar nicht mal so schwer.

Entscheidend ist dabei, das Hintergrundbild in geeigneter Größe und auch Auflösung in ein RapidWeaver-Projekt einzubinden. Dann muss man heraus bekommen, mit welchem CSS-Selektor der Hintergrund in der jeweiligen Vorlage angesprochen wird. Oft ist es z.B. "background-image".

So gehst du vor:

In der RapidWeaver-Projektdatei wird dann ein geeignetes Hintergrundbild im Bereich Resources abgelegt und dann mit benutzterdefiniertem CSS-Code eingebunden. Den benutzerdefinierten CSS-Code schreibst in den Page Inspector unter Meta-Tags & HTML Code > CSS.

Hier ein Beispiel für benutzerdefinierten Code, der ein Hintergrundbild responsiv, d.h. proportional größenangepasst einbindet:

 body { background-image: url(%resource(background.jpg)%); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Der Dateiname der Bilddatei “background.jpg” muss natürlich individuell angepasst werden.