Jump to content

Webseite mit fixiertem Hintergrund


Alexander Bürgin

Empfohlene Beiträge

Hallo Zusammen
 
Ich wollre fragen ob jemand weiss wie ich das machen kann, den Background einer Webseite mittels CSS so fixen kann wie bei dieser hier:  http://www.duschdor.ch/

 

Wichtig dabei ist, das es genau so Funktioniert wie da, denn ich finde das einfach super.

 

Ich habe mir den Quellcode angesehen, und finde den CSS stie für duschwand nicht, ich frage mich ob das der fehler ist?

 

Wie bzw. welche CSS befehle würdet ihr wo geben?

 

Danke schonmals

Link zu diesem Kommentar

auf der Seite ist das – für heutige Verhältnisse – relativ kompliziert gelöst:

 

Das Bild-Element ist mit

    position:fixed; top:0; left:0;

ins Fenster fixiert (und damit aus dem Dokument-Fluss entfernt) und ins Eck gepinnt worden. Damit ist es dem Rest des Dokuemnts nicht mehr "im Weg" und bleibt an Ort und Stelle.

 

Der Inhaltsbereich wurde dann mit

    position:relative; z-index:30;

weiter in den Vordergrund gerückt.

 

 

Man könnte stattdessem auch dem Body-Element folgende CSS-Formatierung mitgeben:

     background: url("hintergrundbild.jpg") no-repeat fixed 0 0;

Das Dokument bekommt so das Hintergrundbild, das sich nicht wiederholt, nicht mitscrollt, und bei 0 0 positioniert ist.

 

Mit dem CSS3-Befehl

    background-size:cover;

kann dann auch noch das Bild so weit vergrößert werden, dass es *immer* das gesamte Element abdeckt (überschüssiges Bildmaterial oben/unten oder links/rechts wird dabei abgeschnitten).

Mit

    background-size:100% 100%;

könnte man das Bild ins Element-Format rein zerren (beim Body ungünstig, da das Bild dann gequetscht wird, abhängig von der Fenstergröße.

Link zu diesem Kommentar

Danke, das obere habe ich alles rausgefunden und anschliessend umgesetzt, aber das ergebniss war nicht das, was ich mir vorstellte.

 

Der CSS3 befehl half dem ab, nun ist es so wie ich es mir vorstellte. CSS3 ist noch nicht wirklich meine stercke, bzw. ich kenne vieles davon noch nicht

 

Vielen dank, für deine Hilfe :)

Link zu diesem Kommentar

Das ist eine von vielen jQuery-Slide-Show-Skripten. Aber solche Themen wären vielleicht besser in einem anderem Forum auf einer anderen Webseite aufgehoben. Bei uns gehts schon hauptsächlich um Typografie und in dem Unterforum HTML/CSS/Flash dann um Typografie im Webdesign. 

Link zu diesem Kommentar

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung