Streifen in Homepage

Billbos

Hey Leute,

wollte mal folgendes fragen! Ich plane eine Homepage, bei der ein Streifen von links quer nach rechts oben verlaufen soll (in der Grafik - weiß abgebildet). Der Streifen muss nicht zwangsweise an der linken Ecke des Browerfensters beginnen, er soll nur wie auf der Grafik zu sehen ist, hinter der Page verlaufen.
Weiß jemand wie das zu realisieren ist, wenn der Streifen sich denn ausdehnen soll, wenn jemand ein größeres Browerfenster hat?

LG

[Blockierte Grafik: http://img219.imageshack.us/img219/760/homepageg.jpg]
By jbcoolao at 2011-03-23

Tobse

Mal den strich so wie du ihn willst in ein Bild und schreib folgendes in dein stylesheet:

Code

html {
    background: url(link/zum/bild.jpg) top left fixed;
}

Billbos

sicher? woher weiß dann css, dass das image weitergeladen werden soll?

lg

driver

weitergeladen ? css läd die komplette grafik und zeigt diesen an.
je nachdem wie groß deine auflösung is siehst halt dann evtl nurn ausschnitt davon

Billbos

ja das wollte ich ja vermeiden! Möchte ja, dass der Streifen weitergeht! Geht`s eventuell mit PHP?

Tobse

Mit php eher schwer. Wenn du das verhinder willst brauchst du in jedem Fall JS, der weg mit PHP ist jedoch der viel schwerere. Ich weiss zwar nicht wie, aber ich weiss dass es geht, mit JS zu zeichnen (siehe Raphael). Die variante mit PHp sieht so aus:
Beim seitenaufruf mit JS die Bildschrimgröße auslesen (screen.width/screen.height), sie an ein php script senden, dass dann ein bild in der größe erstellt. Das wird dann geladen, allerdings sind dazu weitreichende Kenntnisse nötig.

synaptic

gibts da nich die möglichkeit der 100%-version, wie bei nem fullscreen-flash?
also nen div in den hintergrund legen und darin ein bild mit 100% breite und höhe angeben... oder nur breite, so dass die höhe skaliert wird..
und raphael arbeitet mit svg ,was kein standard is und im ie nich so wirklich funzt, wie es soll

Tobse

dann siehts aber auch bei jedem anders und verzerrt aus. Und wie ein IE skaliert, das will ich garnich sehen...

synaptic

also wenn man nur die breite nimmt, wied die höhe berechnet, so wird da nix verzerrt... wäre nen test wert.
da ich nur mit einer hand tippe, kann ich des net machen..

Tobse

Ich glaube, mich noch erinnern zu können, dass der IE6 das verzerrt. Aber wenn das so ist... Hab mit die width und height abgewöhnt.

HTML

<html>
 <head>
  <style type="text/css">
   body, html, #stripe {
    width: 100%;
    height: 100%;
   }
   #content {
    width: 300px;
    height: 500px;
    background: #000;
    border: 2px solid #FFF;
    color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -250px;
   }
   #stripe {
    position: absolute;
    top: 0;
    left: 0;
   }
  </style>
 </head>
 <body>
 <img id="stripe" src="stripe.png" border="0">
  <div id="content">Lorem ipsum dolor...</div>
 </body>
</html>

Alles anzeigen

Also bei mir wird das verzerrt.

EDIT:
und ohne das Height trifft der streifen nur selten den inhaltsbereich.

onlydp

Hallo,

ich hatte vor einiger Zeit mal ein ähnliches Problem und bin da auf diesen Artikel gestoßen. Hat bei mir besser funktiniert als bloß den Hintergrund als img anzulegen und 100% Breite und Höhe zuzuweisen (ich habe zwar keine Ahnung warum das besser geklappt hat, aber egal)

CookiePick95

Zitat von onlydp

ich hatte vor einiger Zeit mal ein ähnliches Problem und bin da auf diesen Artikel gestoßen. Hat bei mir besser funktiniert als bloß den Hintergrund als img anzulegen und 100% Breite und Höhe zuzuweisen (ich habe zwar keine Ahnung warum das besser geklappt hat, aber egal)

Wenn du ein Bild mit dem img-Tag in den Hintergrund setzen möchtest, dann müsstest du mit dem CSS-Attribut z-index arbeiten. Das ist im Vergleich zum Attribut background wesentlich komplizierter, weil du den z-index bei jeder darüber liegenden 'Ebene' anwenden müsstest.

Grevas

Zitat von CookiePick95

Wenn du ein Bild mit dem img-Tag in den Hintergrund setzen möchtest, dann müsstest du mit dem CSS-Attribut z-index arbeiten. Das ist im Vergleich zum Attribut background wesentlich komplizierter, weil du den z-index bei jeder darüber liegenden 'Ebene' anwenden müsstest.

Falsch.
Man kann den Elementen die unter dem <img> liegen ein negativen z-index geben und dem img selbst ein z-index von 0. So als Beispiel.

Und auch wenn nicht, wäre es kein Problem, da man dann nur ein Wrapper für den rest braucht und dann per CSS definiert

HTML

.wrapper { position: relative; z-index: 5; }

damit hat es sich

//P.S. Die Lösung hat aber auch gewisse kleine Problemchen, im IE kann man dann 'nichts' mehr animieren mittels JS - da es sehr der performance schadet.

Persönlich würde ich einfach eine große .gif machen mit dem Streifen - da die Contentbox wohl eh zentriert wird, sollte es auch keine Probleme bei der Positionierung geben.

Tags