mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:16 Benutzername: Passwort: Auto-Login

Thema: CSS3 / Background-size / cover / scrollbare 100% Höhe vom 24.04.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS3 / Background-size / cover / scrollbare 100% Höhe
Seite: 1, 2  Weiter
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

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*

Habt ihr 'ne Idee? Evtl. nur per javascript lösbar?
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 24.04.2013 11:57
Titel

Antworten mit Zitat Zum Seitenanfang

Und was hält Dich davon ab, in den Quelltext der Seite zu schauen? Lächel

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;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
davidd
Threadersteller

Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 24.04.2013 13:05
Titel

Antworten mit Zitat Zum Seitenanfang

Das hab ich schon gemacht Lächel Mehrmals sogar Lächel

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?
  View user's profile Private Nachricht senden
dercem

Dabei seit: 18.08.2011
Ort: Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.04.2013 13:07
Titel

Antworten mit Zitat Zum Seitenanfang

Zeig doch mal was du hast.
  View user's profile Private Nachricht senden
davidd
Threadersteller

Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 24.04.2013 13:27
Titel

Antworten mit Zitat Zum Seitenanfang

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..
  View user's profile Private Nachricht senden
dercem

Dabei seit: 18.08.2011
Ort: Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.04.2013 13:38
Titel

Antworten mit Zitat Zum Seitenanfang

http://jsfiddle.net/kauSe/

Edit: http://jsfiddle.net/kauSe/1/


Zuletzt bearbeitet von dercem am Mi 24.04.2013 13:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
davidd
Threadersteller

Dabei seit: 24.04.2013
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 24.04.2013 13:47
Titel

Antworten mit Zitat Zum Seitenanfang

Geeenie!!! Lächel Danke! Im zweiten Schritt hattest du nur "relative" durch "static" ersetzt?
  View user's profile Private Nachricht senden
dercem

Dabei seit: 18.08.2011
Ort: Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.04.2013 13:51
Titel

Antworten mit Zitat Zum Seitenanfang

davidd hat geschrieben:
Geeenie!!! Lächel 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 *zwinker*

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.