Hintergrundbild mit CSS skalieren - iPad tauglich

[nettesekel]

Hier zuerstmal ein Beispielprojekt, erstellt mit NetObjects Fusion9.
Schiebt das Browserfenster ruhig mal ein wenig zusammen, hin und her... ihr werdet sehen, das Bild passt sich der Fenstergröße an.
Darüber hinnaus haben wir mit dieser Lösung auch eine funktionierende Lösung fürs iPad gefunden. Mia, ihr iPad  und ich haben es umfangreich getestet. Die Suche war mühsam aber schlussendlich erfolgreich. 

Das Ganze funktioniert ausschließlich mit CSS, es braucht keine Scripts oder ähnliches.

Die Umsetzung ist auch recht einfach. Wir benötigen ein wenig CSS um die Skalierung unseres Hintergrundbildes zu ermöglichen und noch ein wenig CSS für unsere Inhalte, damit diese nicht vom Hintergrundbild verschluckt werden und hübsch im Vordergrund bleiben.

[nettesekel]

Wenn ihr euch durch die drei Seiten des Beispiel-Projekts klickt, werdet ihr sehen, dass jede Seite ein wenig anders aussieht.
Auf der Startseite wurde die Skalierung des Hintergrunds durchgeführt und die Inhalte wurden auf dem Hintergrundbild platziert und zentriert.
Bei diesem Beispiel steht es euch frei, euren Inhalten in NOF von Hand einen Hintergrund zuzuweisen.

Auf der ersten Unterseite (Beispiel1) wurde ebenfalls die Skalierung des Hintergrunds durchgeführt und die Seiteninhalte sind (zentral) mit einem weißen BG hinterlegt. Er ist undurchsichtig und wird von einem dezenten Schatten umrandet.

Auch in Beispiel2 wurde die Skalierung des Hintergrunds durchgeführ. Der Hintergrund der Inhalte wurde auch hier zentral festgelegt, aber im Gegensatz zu Beispiel 1 ist er leicht transparent, so dass das skalierte Hintergrundbild leicht durchscheinen kann.

[nettesekel]

Allgemeine Erklärung für alle 3 Beispiele zutreffend
--------------------------------------------------------------------------------------------------------
Da ihr vermutlich den BG für euer gesamtes Projekt nutzen wollt, legt ihr euch als erstes für eure Startseite einen eigenen Masterrahmen an.

Entscheidet euch nun für eins der drei Beispiel und kopiert euch aus dem nächsten Post den CSS-Code für das Beispiel eurer Wahl.
Fügt diesen Code im Anschluss in den Windows-Editor ein und speichert die Datei unter dem Namen "background.css" ab.

[nettesekel]

CSS-Code für das Beispiel Startseite:
^{(skaliertes bildschirmfüllendes Hintergrundbild + zentrierte Seiteninhalte)}
-------------------------------------------------------------------------------------------------------

Code: HTML5

1. img.bg {
2.   /* Set rules to fill background */
3.   min-height: 100%;
4.   min-width: 1024px;
5.        
6.   /* Set up proportionate scaling */
7.   width: 100%;
8.   height: auto;
9.        
10.   /* Set up positioning */
11.   position: fixed;
12.   top: 0;
13.   left: 0;
14. }
15.  
16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
17.   img.bg {
18.     left: 50%;
19.     margin-left: -512px;   /* 50% */
20.   }
21. }
22.  
23. #page-wrap {
24.   position: relative;
25.   width:950px;
26.   margin: 50px auto;
27. }

CSS-Code für das Beispiel1:
^{(skaliertes bildschirmfüllendes Hintergrundbild + zentrierte Seiteninhalte mit weißem BG und Schatten)}
-------------------------------------------------------------------------------------------------------

Code: HTML5

1. img.bg {
2.   /* Set rules to fill background */
3.   min-height: 100%;
4.   min-width: 1024px;
5.        
6.   /* Set up proportionate scaling */
7.   width: 100%;
8.   height: auto;
9.        
10.   /* Set up positioning */
11.   position: fixed;
12.   top: 0;
13.   left: 0;
14. }
15.  
16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
17.   img.bg {
18.     left: 50%;
19.     margin-left: -512px;   /* 50% */
20.   }
21. }
22.  
23. #page-wrap {
24.   position: relative;
25.   width:950px;
26.   padding: 20px;
27.   margin: 50px auto;
28.   background: white;
29.   -o-box-shadow: 0 0 20px black;
30.   -moz-box-shadow: 0 0 20px black;
31.   -webkit-box-shadow: 0 0 20px black;
32.   box-shadow: 0 0 20px black;
33. }

CSS-Code für das Beispiel2:
^{(skaliertes bildschirmfüllendes Hintergrundbild + zentrierte Seiteninhalte mit teiltransparentem BG und Schatten)}
-------------------------------------------------------------------------------------------------------

Code: HTML5

1. img.bg {
2.   /* Set rules to fill background */
3.   min-height: 100%;
4.   min-width: 1024px;
5.        
6.   /* Set up proportionate scaling */
7.   width: 100%;
8.   height: auto;
9.        
10.   /* Set up positioning */
11.   position: fixed;
12.   top: 0;
13.   left: 0;
14. }
15.  
16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
17.   img.bg {
18.     left: 50%;
19.     margin-left: -512px;   /* 50% */
20.   }
21. }
22.  
23. #page-wrap {
24.   position: relative;
25.   width:950px;
26.   padding: 20px;
27.   margin: 50px auto;
28.   background: rgba(255,255,255,0.5);
29.   -o-box-shadow: 0 0 20px black;
30.   -moz-box-shadow: 0 0 20px black;
31.   -webkit-box-shadow: 0 0 20px black;
32.   box-shadow: 0 0 20px black;
33. }

[nettesekel]

Allgemeine Erklärung für alle 3 Beispiele zutreffend
--------------------------------------------------------------------------------------------------------
In dieser Datei werden alle CSS-Formatierungen zusammengefasst, die später für die Skalierung des Hintergrundbildes und die Layouthintergründe verantwortlich sind.

Bindet diese Style-Datei als neues Asset in euer Projekt ein. Wie man zusätzliche Assets, in diesem Fall eine CSS-Datei, in NetObjects Fusion einbinden kann könnt ihr hier nachlesen. Bei dieser Gelegenheit bindet auch gleich das zu skalierende Hintergrundbild als Asset in euer Projekt ein.

Im Anschluss wechselt ihr in die Publizieren-Ansicht und sucht dort nach der neu eingebundenen Datei. In meinem Fall habe ich die Datei im Asset-Ordner gefunden.
Wenn ihr die Datei gefunden habt, schneidet ihr diese aus und fügt sie in den html-Ordner ein. Danach könnt ihr in die Arbeitsansicht wechseln.

Kontrolliert auch kurz, ob das Bild im Assetordner liegt und fügt es - falls nicht - von Hand dort ein, ich gehe aber davon aus, dass dies nicht nötig ist.




Als nächstes müsst ihr nun die Verlinkung zu der eingebundenen Style-Datei zwischen den Head-Tags eurer Seite eintragen.

Code für die Startseite:

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="./html/background.css">

Code für alle Unterseiten bei Publizierung nach Assettyp:

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="../html/background.css">

[nettesekel]

Allgemeine Erklärung für alle 3 Beispiele zutreffend
--------------------------------------------------------------------------------------------------------

Nun sind noch zwei weitere kleine Einfügungen im Seiten-html nötig. Die Angaben in der eingebundenen CSS-Datei beziehen sich auf div-Container, welche wir nun mit dieser Einfügung in unsere Seite einfügen.

Kopiert dazu den folgenden Code in das Seiten-html eurer Seite und zwar an den Beginn des Haupttextes. Dazu ruft ihr vorzugsweise die Masterrahmen-Eigenschaften auf (F10) und klickt dann auf der Eigenschaftenpalette den html-Button. Im sich öffnenden Fenster sucht ihr die entsprechende Stelle für die Einfügung und fügt den Code dort ein.Editiert hier bitte im angegebnen Pfad den Namen eures Hintergrundbildes.

Code für die Startseite:

Code: HTML5

1. <img src="./assets/images/bg.jpg" class="bg">
2. <div id="page-wrap">

Code für alle Unterseiten bei Publizierung nach Assettyp:

Code: HTML5

1. <img src="../assets/images/bg.jpg" class="bg">
2. <div id="page-wrap">

Abschließend erfolgt noch eine kleine Einfügung am Ende des Haupttextes. Der Code für diese Einfügung ist für alle Seiten identisch:

Code: HTML5

1. </div>

Ich wünsche Euch viel Erfolg und Spaß bei der Umsetzung!