Fullsize Background

**Nils Riel** · 15.09.2010, 14:54

Hallo,

suche gerade eine Lösung für einen Full-Size-Background, welche ohne folgende Probleme auskommt (habe bisher keine gefunden, welche Fehlerfrei funktioniert)

- IE scrollt nur, wenn die Maus über dem Content ist, nicht aber, wenn sie sich über dem Hintergrund befindet -> GELÖST! Gibt mal dem scrollbaren DIV ein Hintergrund dann ist er auf einmal Scrollbar - Lösung: Ein transparentes Gif als Hintergrundbild

- Das Scrollen ruckelt selbst bei starken Computern (kaum nutzbar bei Schwachen) - Noch keine Lösung

- Da ein div über dem Bild liegt, ist nicht mehr der Body, sondern der Container der Scrollbereich. Wird nun die Lightbox aktiviert, überdeckt diese den Scrollbalken rechts. Ärgerlich, aber vertretbar

Habe viel rumprobiert, aber jede Lösung hatte wenigstens eines der Probleme. Natürlich will ich auch kein Javascript nutzen

Dann mal ran ihr CSS-Cracks da draußen ^^

**Nook** · 15.09.2010, 15:05

hast du schon probiert, statt den Background im Body zu definieren, eine Seitenfüllendes DIV mit background, height 101% und z-index: -999?
dieses Div nicht als Rahmen für deine Inhalte , sondern als esters oder letztes allein stehendes div, mit absoluter prositionieren.

**KATgirl** · 15.09.2010, 15:06

Hi,

willst du 100% Weite nutzen oder 100% Höhe?

Oder willst du das immer ein Scrol-Balken da ist, damit die Seite nicht "hüpft"!

LG Kirsten

**Nils Riel** · 15.09.2010, 15:16

Sorry, hätte ich dazusagen sollen, folgendes möchte ich:
http://ringvemedia.com/ (hat die oben genannten Probleme auch)

Sprich: der Background hat width:100% und min-height:100% (wegen dem Verhältnis). Das löst man "normalerweise" mit einem Bild mit eben diesen Eigenschaften und einem Div welches darüber liegt. Aber genau mit dieser Lösung gibt es die oben genannten Probleme.

Habe eine Lösung für ein Problem gefunden, siehe ersten Post.

**codestorm** · 15.09.2010, 16:15

Soll der Hintergrund mitscrollen oder fix sein?

Ich habe mich selbst gerade lange mit dem Thema beschäftigt. Hier meine Variante:

Ich habe innerhalb des wrappers (am Anfang) ein Div-Container mit folgenden Styles

Code:

#backimg {
  height:100%;
  left:0;
  overflow-x:hidden;
  overflow-y:hidden;
  position:absolute;
  top:0;
  width:100%;
  z-index:-9999;
}

im Container habe ich ein das Hintergrundbild als img-Tag mit folgendem Style

Code:

img.source-image {
  height:auto;
  min-width:1440px;
  width:100%;
}

Zu sehen gibt es das ganze (noch Beta) hier: www.codestorm.de/lino/

Vielleicht hilft das ja weiter...

Grüße

**Nils Riel** · 15.09.2010, 18:04

Cool, danke dir! Mit der Lösung sind alle oben genannten Probleme gelöst

Einzig das der IE6 die Seite unnötig lang zieht.

Edit: Schade, deine Lösung klappt bei mir leider nicht, da mein Hintergrundbild fix sein soll

**codestorm** · 16.09.2010, 00:04

Code:

position:fixed;

**Nook** · 17.09.2010, 09:56

der IE6 frisst position: fixed nur im <body>.

Für alle anderen Browser sollte die erste Antwort die Lösung bringen.

**Gassi** · 09.10.2010, 15:10

Kleiner Nachtrag:
Das (gotochina) sieht für mich übrigens stark nach supersized aus:
http://www.buildinternet.com/project/supersized/

hab ich auch schon mal für ne Seite verwendet....

Gruss Gassi

**andreasisaak** · 09.10.2010, 18:05

Da ich mal annehme das du das für eine Contao Seite brauchst, empfehle ich dir dieses Script http://mtness.net/demos/moosizer/

Das Script habe ich schon mehrmals eingesetzt und bisher noch keine der von dir beschriebenen Probleme entdecken können :-)

**tio** · 18.10.2010, 21:52

Zitat von jared

Da ich mal annehme das du das für eine Contao Seite brauchst, empfehle ich dir dieses Script http://mtness.net/demos/moosizer/

Das Script habe ich schon mehrmals eingesetzt und bisher noch keine der von dir beschriebenen Probleme entdecken können :-)

hey,

wie komme ich auf dieser komischen Site zurecht...? wo kann ich da besagtes Script finden... möchte auch ein supersize machen...

danke t.

**planepix** · 18.10.2010, 21:58

Hallo tio,

einfach die Seite aufrufen und im Firefox den Quellcode aufrufen, dann auf

Code:

scripts/moosized.1.0.js

**tio** · 19.10.2010, 18:23

Zitat von planepix

Hallo tio,

einfach die Seite aufrufen und im Firefox den Quellcode aufrufen, dann auf

Code:

scripts/moosized.1.0.js

hi besten Dank. Aber wenn ich dieses Script anschaue, frage ich mich,
wo wird da ein Bild also .jpg oder .png aufgerufen...

und wie resp. wo binde ich das in ein contao Projekt ein...
schwierig... ui.

danke
t

***xchs*** · 19.10.2010, 18:54

Hallo tio,

was das Skript betrifft: Das bindest Du im Backend unter "Layout" -> "Themes" -> Icon "Die Seitenlayouts des Theme ID x bearbeiten" im Eingabefeld "Zusätzliche <head>-Tags" ein.

Wie das mit dem Bild nun aber im Detail funktioniert, habe ich mir (noch) nicht angesehen!

**mziege** · 10.11.2010, 08:14

Hallo zusammen,

habe gerade den MooSizer ausprobiert und hat super geklappt. Werde ich direkt mal fürs nächste Projekt verwenden!

Danke an alle

**tio** · 18.11.2010, 21:44

hallo,

kann mir vielleicht jemand helfen habe das js Script kopiert und im Theme als zusätzlicher HEAD Tag eingefügt...

nur wird mir jetzt der Code auf der Site angezeigt als Text statt ausgeführt...

und wie weiss das Script welches Bild ich als Hintergrund möchte?

besten Dank.
t

**Silvano** · 19.11.2010, 07:36

Zitat von tio

kann mir vielleicht jemand helfen habe das js Script kopiert und im Theme als zusätzlicher HEAD Tag eingefügt...

nur wird mir jetzt der Code auf der Site angezeigt als Text statt ausgeführt...

und wie weiss das Script welches Bild ich als Hintergrund möchte?

besten Dank.
t

Hallo Tio

Zwei Beiträge weiter oben Dir xchs breits die lösung geschrieben ...

Zitat von xchs

Hallo tio,

was das Skript betrifft: Das bindest Du im Backend unter "Layout" -> "Themes" -> Icon "Die Seitenlayouts des Theme ID x bearbeiten" im Eingabefeld "Zusätzliche <head>-Tags" ein.

Wie das mit dem Bild nun aber im Detail funktioniert, habe ich mir (noch) nicht angesehen!

Gruss Silvnao

**tio** · 19.11.2010, 10:48

ahhhh... ich hätte nur <script>....</script> im Header einfügen müssen den eigentlichen Code über eine js Datei oder?

wie spreche ich denn jetzt den Code an, das ist mir nicht klar...

danke.
t

**Silvano** · 19.11.2010, 20:56

Zitat von tio

ahhhh... ich hätte nur <script>....</script> im Header einfügen müssen den eigentlichen Code über eine js Datei oder?

wie spreche ich denn jetzt den Code an, das ist mir nicht klar...

danke.
t

**wiese** · 26.11.2010, 11:57

http://buildinternet.com/live/supersized/ - Das mal angesehen? (jQuery)

**drefsa** · 26.11.2010, 12:44

Guckst Du auch mal hier:
perfect-full-page-background-image
da sind gleich vier Methoden erklärt....

**tio** · 29.11.2010, 12:08

vielen Dank für die Links...

hat soweit geklappt, eine Frage hätte ich jetzt aber noch...
ich habe den Code mittels eigenem CSS eingebunden

HTML-Code:

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

und danach das Bild als "eigener HTML Code" - Artikel eingefügt...

war das korrekt oder wie füge ich den eigentlich Code

HTML-Code:

<img src="tl_files/Layout/HG.jpg" class="bg">

am besten ein...

danke
t.

**tio** · 22.03.2011, 14:37

hi zusammen,

hat vielleicht noch jemand nen Tipp wie ich echtes Fullsize hinkriege...
also damit das Bild nicht geschnitten sondern anhand des Bildschirm vergrössert, verkleinert wird..

thanks