Ergebnis 1 bis 37 von 37

Thema: [Gelöst] Parallax ohne Javascript in eigenem Layoutbereich

  1. #1
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard [Gelöst] Parallax ohne Javascript in eigenem Layoutbereich

    Hallo liebe Community,


    mir ist auch klar, dass das Thema Parallaxer Effekt bei manchen ziemlich abgedroschen ist.

    Ich versuche aber gerade einen solchen Effekt ganz dezent einzusetzen, aber ohne JavaScript nur mit reinem CSS.
    Die Seite wo ich ein passendes Beispiel entdeckt habe findet sich hier.

    Mittels eigenem Layoutbereich wird mir dieser Code vor dem umschließenden Element erzeugt:

    HTML-Code:
    <div class="custom">
        <div id="parallax">
            <div class="inside">    
                <div id="kontakt-33" class="mod_article first last block">
                    <h1 id="down" class="ce_headline first">Überschrift 1</h1>
                        <div class="ce_text block">
                            <p>
                         </div>
                    <h2 id="down" class="ce_headline">Überschrift 2</h2>
                    <div class="ce_text last block">
                        <p>
                     </div>
                  </div>
                 <div class="headerpicture">
                    <img class="logo" src="" alt="">
                 </div>
              </div>
        </div>
    </div>
    screenshot.jpg

    Das Problem ist nun, dass mir nur der .mod_article angezeigt wird.
    Ich habe mittels Dreamweaver die HTML und CSS Datei des Originals übernommen, da stimmt die Darstellung, sobald ich die von Contao erzeugten div-Klassen: .custom und .inside, sowie die div-id #parallax einsetze wird mir das Bild nicht mehr angezeigt.

    Mein Problem ist, dass das ganze lokal unter Xampp läuft.

    Die CSS Datei sieht so aus:

    HTML-Code:
    *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0; 
    }
    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    }
    body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    font-size: 120%;
    line-height: 1.625;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-perspective: 1px;
    -moz-perspective: 1px;
    -ms-perspective: 1px;
    -o-perspective: 1px;
    perspective: 1px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; 
    }
    body * {
    -webkit-perspective: 1px;
    -moz-perspective: 1px;
    -ms-perspective: 1px;
    -o-perspective: 1px;
    perspective: 1px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; 
    }
    p {
    margin-bottom: 1em; 
    }
    hr {
    margin: 4em 0; 
    }
    .mod_article {
    padding: 20px 20%;
    position: relative;
    top: 60%;
    background-color: white; 
    }
    .headerpicture {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 60%;
    padding-top: 20%;
    background: url(files/Bildmaterial/Jellyfish.jpg) no-repeat 50% 50%; 
    background-size: cover;
    -webkit-transform: translateZ(-0.9px) scale(1.9);
    -moz-transform: translateZ(-0.9px) scale(1.9);
    -ms-transform: translateZ(-0.9px) scale(1.9);
    -o-transform: translateZ(-0.9px) scale(1.9);
    transform: translateZ(-0.9px) scale(1.9);
    z-index: -900;
    text-align: center; 
    }
    .logo {
    width: 100%;
    max-width: 300px;
    z-index: 0; 
    }
    Vielen Dank schonmal für Eure Hilfe und allen ein schönes und erholsames WE
    Geändert von Stefan01 (02.03.2015 um 13:35 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Stell die Seite einfach irgendwo online, dann kann man helfen .

  3. #3
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Werde sehen was ich machen kann, aber Danke schonmal für die super schnelle Antwort !
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  4. #4
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    So, geschafft:

    http://contao.kaufhaus-x.de/index.ph...llax-test.html

    Hätte ich gleich machen sollen
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Du hast .mod_article (zwei mal) eine background-color:#fff; gegeben, dadurch sind natürlich Elemente, die dahinter liegen, nicht sichtbar

  6. #6
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Hallo Spooky, das ist aber bei der original Seite ebenfalls so gemacht.

    Es würde nur funktionieren, wenn direkt nach dem body-tag .mod_article und .headerpicture stehen würden ohne die div-Container .custom #parallax und .inside.

    Bei .mod_article habe ich den doppelten tag gelöscht und bg-color ebenfalls. Der gewünschte Effekt bleibt leider aus; oder ich habe irgendwo noch eine Kleinigkeit übersehen.

    Viele Grüße

    Stefan



    Gesendet von iPhone mit Tapatalk
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von Stefan01 Beitrag anzeigen
    Hallo Spooky, das ist aber bei der original Seite ebenfalls so gemacht.
    Ja, dort schiebt sich auch der Inhalt über den Hintergrund. Du hast es anders gebastelt. Wie willst du es nun genau haben?

  8. #8
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard Parallax ohne Javascript in eigenem Layoutbereich

    Eigentlich so wie auf der original Seite. Wo habe ich den Fehler den reingebracht?


    Gesendet von iPhone mit Tapatalk
    Geändert von Stefan01 (01.03.2015 um 14:23 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Achso, das Problem, warum man den Hintergrund überhaupt nicht sieht und warum der Inhalt bei dir sofort ganz oben anfangt, anstatt weiter unten, wie im ursprünglichen Beispiel, ist, dass du zwar
    PHP-Code:
    .mod_article {
        
    positionrelative;
        
    top60%;

    benutzt, aber da das Elternelement von .mod_article keine fix definierte Höhe hat, hat "top:60%;" keine Auswirkung. Du könntest statt dessen mit margin-top arbeiten, dann musst du aber auch noch dem .inside von #parallax ein overflow:hidden; geben, wegen margin-collapse. Dann kann man sich mal den Rest ansehen.

  10. #10
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Danke für den Tipp, schaut soweit auch ganz gut aus, nur müsste jetzt .headerpicture langsam mitscrollen, während sich .mod_article darüberschiebt.


    Gesendet von iPhone mit Tapatalk
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Du hast noch
    PHP-Code:
    transformtranslateZ(0pxscale(1); 
    drin, dadurch liegt .headerpicture einfach auf der selben ebene wie alle anderen Elemente. Aber selbst wenn du
    PHP-Code:
    transformtranslateZ(-0.9pxscale(1.9); 
    wieder hinzufügst, passt es noch nicht. Warum, kann ich mir auch noch nicht erklären. Evt. sind diese Z-transformations nicht so straight forward wie ich dachte.

  12. #12
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard Parallax ohne Javascript in eigenem Layoutbereich

    Wie bereits weiter oben geschrieben, wenn ich das CSS so übernehme und die beiden div Elemente alleine in den body-Bereich packe (in externem Editor erstellt) funktioniert alles so wie beim Original.


    Gesendet von iPhone mit Tapatalk
    Geändert von Stefan01 (02.03.2015 um 11:31 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  13. #13
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Der Effekt funktioniert jetzt schonmal wie gewünscht. Allerdings nur, wenn ich bei mod_article die Hintergrundfarbe white weglasse. Das Bild ist dann aber auch nur mittig platziert.

    Mein Ziel ist es ein Bild einzusetzen mit vh und vw 100%. Sobald der Besucher dann zu scrollen beginnt, soll sich der Inhalt des .mod_article mit bg-color white über das Bild schieben, während das Bild im Hintergrund ebenfalls langsam mitscrollt.
    Geändert von Stefan01 (02.03.2015 um 10:54 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  14. #14
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von Stefan01 Beitrag anzeigen
    Der Effekt funktioniert jetzt schonmal wie gewünscht. Allerdings nur, wenn ich bei mod_article die Hintergrundfarbe white weglasse.
    Ja, weil das Hintergrundbild ja vom Inhalt verdeckt wird. Durch die 3D transforms und die transform origin schiebt sich das Bild, trotz absoluter Positionierung weiter oben, nach "unten".

  15. #15
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Hallo Spooky,

    was ich eben nicht verstehe ist, warum der Effekt innerhalb der von Contao angelegten div Elemente bei mir nicht läuft. Wenn ich eine reine HTML Datei mittels Editor erstelle und mein CSS nutze funktioniert alles wie gewünscht.

    Eigentlich ist der Aufbau doch relativ einfach, nur in Contao integriert läuft das irgendwie noch nicht

    Ich habe jetzt sogar mal das Bild der original Beispielseite mit den passenden Skalierungsfaktoren übernommen.

    Der Skalierungsfaktor lässt sich so berechnen:

    1 + (translateZ * -1) / perspective

    Das Bild wird dann aber wieder recht klein dargestellt?
    Geändert von Stefan01 (02.03.2015 um 12:22 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  16. #16
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Teilerfolg!

    Wenn ich bei body* perspective: 1 px weglasse funktioniert das Ganze auch mit bg-color: white. Jetzt muss ich nur noch sehen, wie ich das Bild auf height:100% bekomme.
    Geändert von Stefan01 (02.03.2015 um 13:06 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  17. #17
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Zitat Zitat von Stefan01 Beitrag anzeigen
    Jetzt muss ich nur noch sehen, wie ich das Bild auf height:100% bekomme.
    Lösung:

    .mod_article -> margin-top: 75%


    Wenn ich was übersehen habe oder jemand hat eine elegantere und bessere Lösung freue ich mich über jeden Tipp.
    Geändert von Stefan01 (02.03.2015 um 13:36 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  18. #18
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard Parallax?

    Unter http://www.hofgut.info/ ist weit unten der Punkt "Architektur".

    Läuft das Bild auch unter "Parallax" eher nicht oder? wie setzt man sowas um?
    Gruß Mark

  19. #19
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    PHP-Code:
    background-attachment:fixed
    Aber Vorsicht: https://community.contao.org/de/show...l=1#post369837

  20. #20
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard

    ok verstehe

    HTML-Code:
    <div class="bgscroll" style="background:transparent url(/tl_files/dateien/bilder/hintergruende/bg-3.jpg) 50% 50% [B]fixed [/B]repeat-y"></div>
    was ich nicht verstehe, wo haben die den schmalen Bildaussschnitt mit einer Höhe versehen.
    Ich sehe immer noch 100%

    .bgscroll und auch bei .bg-container
    Gruß Mark

  21. #21
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    height:100%; funktioniert in dem Fall durch position:absolute; ( http://jsfiddle.net/8Ld31Lxq/ )
    Die eigentliche Höhe resultiert aus der Höhe des .container innerhalb des .bg-container
    Geändert von Spooky (20.05.2015 um 10:26 Uhr)

  22. #22
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard

    ich glaub jetzt hab ichs....

    beim .container ist auch keine Höhe angegeben sondern
    padding: 100px 0 60px;
    deshalb die "Höhe"

    Find den effekt eigentlich netter als den parallax

    Das Bild ist dann aber leider nicht responsive wie ich das sehe... oder ist das nur in dem Beispeil so?
    Gruß Mark

  23. #23
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    beim .container ist auch keine Höhe angegeben sondern
    padding: 100px 0 60px;
    deshalb die "Höhe"
    Ja, sage ich ja, die eigentliche Höhe resultiert aus der Höhe des .container Und dessen Höhe resultiert wiederum aus dessen Inhalt + das Padding.


    Zitat Zitat von kischd Beitrag anzeigen
    Das Bild ist dann aber leider nicht responsive wie ich das sehe... oder ist das nur in dem Beispeil so?
    Warum ist es nicht responsive für dich?

  24. #24
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard

    wenn ich den Browser zusammenschiebe, wird das Bild ja nicht von der Größe her angepasst.

    Bei Bildern die keine Infos verlieren dürfen, würde es hier ja etwas abschneiden... oder kann man das umgehen?
    Gruß Mark

  25. #25
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard

    Hab im Firefox jetzt gesehen, wenn ich der .bgscroll die width: 100% ausblende und dann wieder ein....
    wird das Bild skaliert
    Gruß Mark

  26. #26
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    wenn ich den Browser zusammenschiebe, wird das Bild ja nicht von der Größe her angepasst.
    Doch, wird es (durch background-size:cover;).

  27. #27
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard

    wird das bei dir am Browser angepasst?

    auf der Seite ist das der Klasse schon hinzugefügt
    background-size: cover !important;

    bei meinem FF und IE wird das Bild aber abgeschnitten
    Gruß Mark

  28. #28
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Ja, es wird an die Breite angepasst, allerdings nur bis zu eine Größe von 1140px. Warum es dann nicht mehr passiert kann ich mir momentan auch nicht erklären. Am Seitenverhältnis des Containers und des Bildes sollte es auch nicht liegen.

    Abgeschnitten wird das Bild sowieso, entweder oben und unten oder links und rechts, je nach Seitenverhältnisse.

  29. #29
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Responsive wird es erst durch Prozentangaben.

    Code:
    padding: 20% 0;
    background-size: 100% auto;

  30. #30
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von bizon Beitrag anzeigen
    Responsive wird es erst durch Prozentangaben.
    Nein, responsive ist es schon durch background-size:cover;

    background-size:100% auto; deckt nicht alle Fälle ab.

  31. #31
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    @spooky
    Mit background-size: cover; passiert aber eben genau das, was kischd oben schon bemängelte, nämlich dass beim Verändern der Viewportgröße das Hintergrundbild beschnitten wird. Wohingegen background-size: 100% auto; immer das komplette Bild zeigt.

    Zitat Zitat von spooky
    background-size:100% auto; deckt nicht alle Fälle ab
    Es ging in der Anfrage von kischd, glaube ich, auch nicht um alle Fälle, sondern um sein Beispiel auf dieser Hofgut-Site. Dort wird das Hintergrundbild aber auch nicht komplett angezeigt, sondern teilweise abgeschnitten.

  32. #32
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von bizon Beitrag anzeigen
    Mit background-size: cover; passiert aber eben genau das, was kischd oben schon bemängelte, nämlich dass beim Verändern der Viewportgröße das Hintergrundbild beschnitten wird.
    Beschnitten wird es sowieso, wie schon beschrieben. Warum auf der Seite das Hintergrundbild nicht mehr verkleinert mit background-size:cover; (obwohl es vom Seitenverhältnis des Bildes und des Elementes her möglich ist) unter eine Breite von 1140px habe ich noch nicht herausgefunden.


    Zitat Zitat von bizon Beitrag anzeigen
    Wohingegen background-size: 100% auto; immer das komplette Bild zeigt.
    Nein, mit 100% auto; wird das Bild entweder oben und unten beschnitten oder es wird oben und unten der Hintergrund des Elementes sichtbar, je nach Seitenverhältnisse.


    Zitat Zitat von bizon Beitrag anzeigen
    Dort wird das Hintergrundbild aber auch nicht komplett angezeigt, sondern teilweise abgeschnitten.
    Ja, soll ja auch so sein.

    // siehe diese Beispiele, dann wird es vielleicht klarer: http://jsfiddle.net/jchv2f5z/
    Geändert von Spooky (20.05.2015 um 16:41 Uhr)

  33. #33
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Mit nachfoldenden Einstellungen macht das Hintergrundbild in jedem Viewport genau das, was erwartet wird. Es ist vollständig, von der linken oberen, bis zur rechten unteren Ecke sichtbar - es wird nichts beschnitten! Das war in den vorgerigen Posts der Wunsch des Fragenstellers: kischd. Natürlich muss man, um alles zu sehen, entsprechend den padding-Einstellungen des divs scrollen, aber das ist ja der gewünschte Effekt.
    Code:
    <div class="bgimg"><div>    // das div kann auch Inhalt haben
    
    .bgimg {
    	width: 100% ;
    	padding: 15% 0;
    	background: url(../pfad_zum_bild.jpg) no-repeat center center fixed;
    	background-size: 100% auto;  // oder z.B. 90% auto - falls links und rechts ein 5% Rand sein soll
    }
    Verwendet man hingegen background-size: cover; wird das Hintergrundbild eben nicht vollständig dargestellt, sondern beschnitten. Vor allem wird, je kleiner der Screen ist, links und rechts viel weggenommen. Dieser Effekt war aber nicht gefragt.


    @spooky
    Du kannst natürlich gerne schreiben was du willst. Ich habe aber hier keine Frage gestellt und erwarte deshalb auch keine Antwort oder Erklärung. Ich werde auch nicht auf die Verwendung von 'max-width' in Verbindung mit background images eingehen, da ich annehme, dass es dir ebenso geht.

  34. #34
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von bizon Beitrag anzeigen
    Mit nachfoldenden Einstellungen macht das Hintergrundbild in jedem Viewport genau das, was erwartet wird. Es ist vollständig, von der linken oberen, bis zur rechten unteren Ecke sichtbar - es wird nichts beschnitten!
    Nein, mit diesen Einstellungen wird, wie schon erwähnt, das Bild entweder oben und/oder unten beschnitten oder man sieht oberhalb und/oder unterhalb des Hintergrundbildes den restlichen Hintergrund des Containers. Siehe zB: http://jsfiddle.net/q4yfgn6k/

    Zur besseren Veranschaulichung, was genau passiert: http://jsfiddle.net/6dLm6xfx/ - der während dem scrollen rot sichtbare Bereich, wäre ein Bereich ohne dem Hintergrund-Bild innerhalb des Containers.


    Zitat Zitat von bizon Beitrag anzeigen
    Verwendet man hingegen background-size: cover; wird das Hintergrundbild eben nicht vollständig dargestellt, sondern beschnitten. Vor allem wird, je kleiner der Screen ist, links und rechts viel weggenommen.
    Würde das nicht passieren, würde man nicht vom Hintergrund abgedeckte Flächen sehen.


    Außerdem: wenn man wirklich haben möchte, aus welchem Grund auch immer, dass das ganze Hintergrundbild sichtbar ist, kann man auch background-size:contain; verwenden.


    Zitat Zitat von bizon Beitrag anzeigen
    Ich werde auch nicht auf die Verwendung von 'max-width' in Verbindung mit background images eingehen, da ich annehme, dass es dir ebenso geht.
    Was meinst du mit max-width in Verbindung mit background images?
    Geändert von Spooky (20.05.2015 um 21:22 Uhr)

  35. #35
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Ah, nun kann ich auch erklären, warum das Bild im ursprünglichen Beispiel sich irgendwann nicht mehr horizontal verkleinert.
    • Wenn ein Background als "Fixed Attachment" definiert ist, wird der Background natürlich fixed relativ zum Viewport.
    • Der Container, in dem sich der Background befindet wird dadurch quasi zu einem Viewport für das Background image (Container im Nachfolgenden Beispiel rot umrahmt).
    • Wird der Background mit background-size:cover; skaliert, muss der Background gezwungenermaßen den ganzen Viewport abdecken, ansonsten würde vielleicht, je nach Scroll Position und Seitenverhältnisse von Background und Viewport, kein Background in dessen Container erscheinen.
    • Dadurch wird irgendwann, je nach Seitenverhältnis des Viewport und des Bildes, das Bild auch nicht mehr horizontal kleiner, weil es oben und unten ansonsten kleiner als der Viewport werden würde.

    Veranschaulichung: http://jsfiddle.net/ms0xo6m5/


    Würde man statt dessen 100% auto; verwenden, hätte der Container manchmal gar keinen Background, wenn das Seitenverhältnis des Viewport größer als das Seitenverhältnis des Background Images wird. Siehe: http://jsfiddle.net/oLjet5s3/ (Viewport kleiner ziehen - Bereiche des Containers ohne Background werden rot).
    Geändert von Spooky (20.05.2015 um 21:55 Uhr)

  36. #36
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Herrliche Diskussion und schön veranschaulicht.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  37. #37
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Danke, mir hatte der Umstand, dass das Bild in kischd's ursprünglichem Beispiel irgendwann nicht mehr horizontal kleiner wurde und ich nicht wusste warum einfach keine Ruhe gelassen, jetzt freue ich mich um so mehr, dass da doch kein mir unbekannter Hokus-Pokus dahinter steckt

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •