Autor |
Nachricht |
davidd
Threadersteller
Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 24.04.2013 11:43
Titel CSS3 / Background-size / cover / scrollbare 100% Höhe |
|
|
Hi zusammen,
ich bastle gerade an einer Seite, die auf den ersten Blick voll ausgefüllt ist mit einem Bild. Über dem Bild liegt dann Logo etc. - "Auf den ersten Blick", weil man trotzdem das Bild wegscrollen können sollte. Gehe ich also mit einem viewport von 1024*768px auf die Seite ist das Bild 768px hoch. Scrolle ich dann, sehe ich direkt das folgende Element. Verkleinere ich das Fenster, passt sich die Höhe dem geringeren Wert an.
Viel gequatsche und wahrscheinlich doch nichts verstanden? Dann guckt mal hier das Beispiel: http://www.eventideoysterco.com - Genau so würde ich es gerne machen, bekomme das mit der Höhe aber nicht hin
Habt ihr 'ne Idee? Evtl. nur per javascript lösbar?
|
|
|
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Mi 24.04.2013 11:57
Titel
|
|
|
Und was hält Dich davon ab, in den Quelltext der Seite zu schauen?
Code: | media="(min-device-width: 980px) and (min-width: 980px), (max-device-width: 1024px) and (min-width: 1024px) and (orientation: landscape)"
#header {
background-size: cover;
height: 100%;
margin: 0px;
min-height: 100%;
padding: 0px;
position: relative;
z-index: 1000;
} |
|
|
|
|
|
Anzeige
|
|
|
davidd
Threadersteller
Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 24.04.2013 13:05
Titel
|
|
|
Das hab ich schon gemacht Mehrmals sogar
Mein Problem ist vielmehr, dass ich die Höhe nicht so definiert bekomme wie in dem Beispiel. Der Ausschnitt des Bildes hat immer genau die Höhe deines Browserfensters. Sobald du anfängst zu scrollen fängt das nächste div an. Verstehst du?
|
|
|
|
|
dercem
Dabei seit: 18.08.2011
Ort: Düsseldorf
Alter: -
Geschlecht:
|
Verfasst Mi 24.04.2013 13:07
Titel
|
|
|
Zeig doch mal was du hast.
|
|
|
|
|
davidd
Threadersteller
Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 24.04.2013 13:27
Titel
|
|
|
http://nextthingtodo.com/coverimage/
Das ist ein Stand, der am nächsten dran kommt.. aber das div hat eben eine fixe Höhe und nicht variabel wie bei dem Beispiel. Außerdem scrollt das folgende Absatz (<p>) dann ja "drüber" - es sollte aber das erste div wegdrücken..
|
|
|
|
|
dercem
Dabei seit: 18.08.2011
Ort: Düsseldorf
Alter: -
Geschlecht:
|
|
|
|
|
davidd
Threadersteller
Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 24.04.2013 13:47
Titel
|
|
|
Geeenie!!! Danke! Im zweiten Schritt hattest du nur "relative" durch "static" ersetzt?
|
|
|
|
|
dercem
Dabei seit: 18.08.2011
Ort: Düsseldorf
Alter: -
Geschlecht:
|
Verfasst Mi 24.04.2013 13:51
Titel
|
|
|
davidd hat geschrieben: | Geeenie!!! Danke! Im zweiten Schritt hattest du nur "relative" durch "static" ersetzt? |
Das wichtigere ist das fixed des Hintergrundbildes. So, und jetzt: Das ganze kannst du auch – semantisch korrekt(er) – nur mit einem img ohne Umweg über ein div machen
Edit: Witzig ist, dass ich einen ähnlichen Effekt für meine, sich gerade in Arbeit befindliche Seite verwende, da aber aus Faulheit mit JS gearbeitet habe.
Zuletzt bearbeitet von dercem am Mi 24.04.2013 13:52, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
background-size: cover; und ios
Background für Link und Div auf volle Höhe austreiben
Hintergrund background-image: cover
Scrollbare Auflistung - ohne Scrollbalken?
Font-size: 100%
IE window size=Bildgröße
|
|