Anzeige

Full Page Background

Full Page Background | PSD-Tutorials.de

Erstellt von captainthriller, 21.03.2010.

  1. captainthriller

    captainthriller Aktives Mitglied

    Dabei seit:
    18.09.2006
    Beiträge:
    332
    Geschlecht:
    männlich
    Software:
    Photoshop, Notepad++
    Kameratyp:
    Nikon D300
    Full Page Background
    Ich bin am experimentieren mit vollflächigen Hintergründen im Browser.
    Das Hintergrundbild soll jedoch größer als auch kleiner skaliert werden durch html/css/javascript.

    Eine sehr interessante Technik habe ich hier gesehen: GOTOCHINA

    Diese Seite habe ich illegalerweise mal auf meinen Webspace "kopiert" natürlich nur zu Testzwecken weil diese Technik hier auch schon als Tutorial war: Perfect Full Page Background Image | CSS-Tricks

    Das Problem was aufgetaucht ist ist folgendes:
    Wenn ich sie Seite (GOTOCHINA) neulade bei sehr kleinem Browserfenster ist alles so wie es sein soll (Browserfenster kleiner als eigentliches Hintergrundbild - Bild ist kleiner skaliert).
    Wenn ich nun meine "kopierte" Version hingegen betrachte, ist das Hintergrundbild erst groß und "springt" dann auf die Fenstergröße: GOTOCHINA

    Kann mir das jemand erklären? ;)
    In Safari funktioniert die Skalierung des Hintergrundbildes nicht wirklich - bei beiden Versionen nicht ;) den IE habe ich auf meinem Mac nicht.

    Danke schonmal für eure Hilfe.

    LG,
    captain
     
    #1      
  2. fakerer

    fakerer Aktives Mitglied

    Dabei seit:
    03.08.2008
    Beiträge:
    804
    Geschlecht:
    männlich
    Full Page Background
    AW: Full Page Background

    HTML:
    1. <div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="server//bg.jpg" /></td></tr></table></div></div>
    2.  
    sehr Interessatn, habe so etwas auch noch nie gesehen.
    Aber die haben einfach eine Tabellenzelle als Hintergrund verwerndet.

    Und über die Div's mit z-index das Div als Hintergund eingestellt.
     
    #2      
  3. Designerist

    Designerist Aktives Mitglied

    Dabei seit:
    12.04.2008
    Beiträge:
    479
    Geschlecht:
    weiblich
    Ort:
    Zürich
    Software:
    Dreamweaver, In-Design, Photoshop, Illustrator
    Kameratyp:
    Canon, Contax, Nikon
    Full Page Background
    AW: Full Page Background

    Hi captain
    Deine Kopie stimmt schon, es kann an der Ladegeschwindigkeit liegen? Bin da aber nicht sicher.
    Ich habe getestet:
    PC = FF, Safari, IE7, Google Chrome = einwandfrei
    Mac = FF, Safari = einwandfrei
    Danke für das Tut, habe ich mit schon lange gewünscht!
    Grüsse, Designerist
     
    #3      
  4. captainthriller

    captainthriller Aktives Mitglied

    Dabei seit:
    18.09.2006
    Beiträge:
    332
    Geschlecht:
    männlich
    Software:
    Photoshop, Notepad++
    Kameratyp:
    Nikon D300
    Full Page Background
    AW: Full Page Background

    stimmt ich habe ja gleichzeitig ein tut gepostet ;) keine ursache :D
    daran könnte es natürlich liegen ...
    @designerist: bei dir "springt" es bei dem "original" auch nicht?

    ich fand die technik auch genial. eben ein html/css-trick ;)
     
    #4      
  5. Designerist

    Designerist Aktives Mitglied

    Dabei seit:
    12.04.2008
    Beiträge:
    479
    Geschlecht:
    weiblich
    Ort:
    Zürich
    Software:
    Dreamweaver, In-Design, Photoshop, Illustrator
    Kameratyp:
    Canon, Contax, Nikon
    Full Page Background
    AW: Full Page Background

    Hi Captain
    Habe jetzt im Geschäft nochmals geschaut, mit Mac: Safari und FF. Der Mac hier ist langsamer als die Rechner, die ich Zuhause habe, und auch hier springt das Bild nicht, ruckelt allerhöchstens ein ganz klein wenig.
    Grüsse, Designerist
     
    #5      
  6. captainthriller

    captainthriller Aktives Mitglied

    Dabei seit:
    18.09.2006
    Beiträge:
    332
    Geschlecht:
    männlich
    Software:
    Photoshop, Notepad++
    Kameratyp:
    Nikon D300
    Full Page Background
    AW: Full Page Background

    kann man das mit javascript denn beheben das problem? also das das bild erst angezeigt wird, wenn es geladen UND skaliert ist?

    @designerist: wenn du dir die sachen selbst runterlädst und auf deinen lokalen server packst siehst du wie das bild springt ;) - unschön :p
     
    #6      
x
×
×