zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild an Fenstergröße anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.12.2013, 15:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2013
Beiträge: 12
grafguetig befindet sich auf einem aufstrebenden Ast
Standard Hintergrundbild an Fenstergröße anpassen

Servus zusammen,

ich habe die Frage in einem älteren Beitrag auch schon gestellt, bin mir nur nicht sicher, ob da noch jmd reinschaut, daher neues Thema. Ich hoffe das ist ok.

In einem anderen Beitrag wurde folgender Code gepostet:

html {
height: 100%;
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(bild.jpg);
}

Das kam dem sehr nahe, was ich vor hatte.
Ich möchte, dass sich das Hintergrundbild der Fenstergröße anpasst, beim scrollen aber nach obenverschwindet. Dies erreiche ich ja, wenn ich fixed durch scroll ersetze. Mein Ziel ist also fast erreicht.
Das Problem ist nur noch, dass ich möchte, dass das Bild sofort beim scrollen nach oben verschwindet und nicht erst wenn die originalgröße des Bildes erreicht wird. Hab ich mich verständlich ausgedrückt?

Hier mal ein Beispiel:
Tinké | Take The Tour

Also Bild passt isch Fenstergröße an, scroll man runter hört das Bild auf.

Vielen Dank schonmal im Vorraus
Gruß Alex
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.12.2013, 23:02
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Das musst du mit Javascript lösen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.12.2013, 15:31
TBT TBT ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 13.02.2010
Beiträge: 21
TBT befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
<img id="bg" src="..." />
Code:
img#bg  {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
damit skaliert das Bild automatisch hoch, wenn das Fenster größer
als das Bild selber ist. Auch das Seitenverhältnis wird beibehalten.
__________________
php2all · · · Patrizier II als Browsergame
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2013, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2013
Beiträge: 12
grafguetig befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank.
Ich werds ausprobieren.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.12.2013, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2013
Beiträge: 12
grafguetig befindet sich auf einem aufstrebenden Ast
Standard

Also ich bekomme es nicht hin.
Hat jmd zufällig nen fertigen Code an der Hand?
Mit Zitat antworten
  #6 (permalink)  
Alt 22.12.2013, 15:43
TBT TBT ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 13.02.2010
Beiträge: 21
TBT befindet sich auf einem aufstrebenden Ast
Standard

Hab doch den kompletten Code geschrieben?
Genau so benutze ich es hier: Galiator Trader
mehr CSS ist dort nicht definiert für das Hintergrundbild.
__________________
php2all · · · Patrizier II als Browsergame
Mit Zitat antworten
  #7 (permalink)  
Alt 22.12.2013, 16:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2013
Beiträge: 12
grafguetig befindet sich auf einem aufstrebenden Ast
Standard

Aber das hat ja nicht den Effekt, den ich haben möchte.
Sobald man scrollt, soll das sich das Bild nach oben verschieben bzw. aufhören.
Weißt du was ich meine?
Mit Zitat antworten
  #8 (permalink)  
Alt 22.12.2013, 16:26
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

schau dir dieses Tutorial an:
Create a Cool Website with Fancy Scrolling Effects
Mit Zitat antworten
  #9 (permalink)  
Alt 22.12.2013, 16:58
TBT TBT ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 13.02.2010
Beiträge: 21
TBT befindet sich auf einem aufstrebenden Ast
Standard

du meinst so?

http://dev.galiator.de/test/
__________________
php2all · · · Patrizier II als Browsergame
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.12.2013, 17:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2013
Beiträge: 12
grafguetig befindet sich auf einem aufstrebenden Ast
Standard

ja genauso meine ich das
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrundbild vom Blog an Auflösung anderer anpassen Saftladen CSS 2 31.10.2013 15:27
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen soulknot CSS 1 08.05.2011 18:31
Hintergrundbild auf verschiedene Monitorgrößen anpassen Moin CSS 2 03.06.2010 00:12
Hintergrundbild größe soll sich dem Text anpassen T!ggr CSS 4 24.03.2010 08:04
Hintergrundbild der browsergrösse anpassen hans23 CSS 2 24.02.2006 12:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:02 Uhr.