Goldener Schnitt

[Gunnar Bittersmann]

@@M. Schmid:

nuqneH

Nun habe ich folgendes anliegen, ich möchte dass der Hintergrund egal welche Auflösung der Bildschirm des Betrachters hat immer mitwächst, aber der goldene Schnitt erhalten bleibt.

Dass du nicht die Bildschirmauflösung, sondern die Viewportgröße meinst, wurde ja schon gesagt.

Die Lösung ergibt sich aus der Spezifikation der 'background-position'-Eigenschaft:
“A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with […] value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.” [CSS21 §14.2.1]

Erstelle eine Grafik, die für alle heutigen Bildschirme hinreichend breit ist (4096 Pixel Breite sollten genügen), als Höhe dürten sich 8 Pixel anbieten (damit erreicht wird, dass die Grafik im Speicher (als Bitmap) nicht zu groß wird, sie aber auch nicht zu oft wiederholt wird). Diese Grafik enthält schwarz und orange im Verhältnis 62:38. (Manchmal ist ein Tippfehler einfach nur ein Tippfehler.)

Diese wird so positioniert, dass der Punkt 62% 0% (vertikal ist egal) der Grafik (d.h. die Grenze zwischen schwarz und orange!) im Punkt 62% 0% der Box (d.h. des Viewports) plaziert wird (die Grenze also bei 62% der Viewportbreite verläuft):

html  
{  
    background-image: url(blackorange.png);  
    background-repeat: repeat-y;  
    background-position: 62% 0%;  
    height: 100%;  
}

oder zusammengefasst

html  
{  
    background: url(blackorange.png) repeat-y 62% 0%;  
    height: 100%;  
}

Dasselbe machst du mit der Textgrafik (":werbeagentur:"). Diese muss nur so breit sein wie die Schrift; wichtig ist das Verhältnis 62:38 von ":werbe" und "agentur:".

Um eine mögliche Verschiebung um einen Pixel durch Rundungsfehler nicht störend sichtbar werden zu lassen, sollte die Grafik nur die Buchstaben auf transparentem Hintergrund enthalten. (Alphatransparenz ist nicht notwendig; auf schwarz-orange mit Antialiasing rendern, dann schwarzen und orangen Hintergrund entfernen.)

Als Hintergrundbild eines anderen Elements einbinden:

body  
{  
    background: url(werbeagentur.png) no-repeat 62% 0%;  
    height: 100%;  
}

Qapla'