Jump to content
Registriere dich bei Typografie.info und schalte sofort alle Mitgliederfunktionen (einschließlich des Download-Portals) frei …

Webseite mit fixiertem Hintergrund

Zur besten Antwort springen Gelöst von Sebastian Nagel,

Empfohlene Beiträge

Alexander Bürgin

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
  • Beste Antwort
Sebastian Nagel

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
Alexander Bürgin

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

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

Hier beginnt deine kreative Reise.
Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Entdecke hunderte Font-Sonderangebote.
FDI Type Foundry besuchen
FDI Wiking jetzt kostenlos laden und nutzen …
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.