Nestoslider: background-repeat /-attachment COMBINED?

Hallo liebe Gemeinde! ;o)

Lassen sich eigentlich die Eigenschaften background-repeat:repeat und background-attachment:fixed kombinieren? (oder geht das meiner Befürchtung nach nur mit einer dem Layout fest zugeschnittenen Grafik - ohne repeat?)

Meine Seite ist vom dynamischen Layout her unterschiedlich hoch.
Ich habe dort einen Background 2px × 1600px waagerecht und senkrecht wiederholend.
Es kommt vor, dass meine Seite die Höhe von 1600px übersteigt und von da an die Hintergrundsgrafik von Neuem beginnt.
Da die Grafik einen Farbverlauf dreierlei Farben aufweist, schaut der Übergang recht unschön (abgehackt) nach dem "Neubeginn" aus.

Ohne die Grafik jetzt der Höhe nach größer machen zu müssen, wäre es vielleicht möglich diese dann einfach zu fixieren trotz repeat, so dass der Text über diese läuft?

LG Nestoslider^^

  1. <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background:url(...) no-repeat fixed ...>

  2. Hallo Nestoslider

    Lassen sich eigentlich die Eigenschaften background-repeat:repeat und background-attachment:fixed kombinieren?

    Warum sollte das nicht gehen?
    Ich finde keinen Hinweis, dass sich die Angaben in irgendeiner Weise gegeneinander ausschließen.
    Hast du es probiert?

    Du kannst mehrere Angaben zum Hintergrund auch in einer Regel zusammenfassen.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
  3. @@Nestoslider:

    nuqneH

    Meine Seite ist vom dynamischen Layout her unterschiedlich hoch.
    Ich habe dort einen Background 2px × 1600px waagerecht und senkrecht wiederholend.
    Es kommt vor, dass meine Seite die Höhe von 1600px übersteigt und von da an die Hintergrundsgrafik von Neuem beginnt.
    Da die Grafik einen Farbverlauf dreierlei Farben aufweist, schaut der Übergang recht unschön (abgehackt) nach dem "Neubeginn" aus.

    Ohne die Grafik jetzt der Höhe nach größer machen zu müssen, wäre es vielleicht möglich diese dann einfach zu fixieren trotz repeat, so dass der Text über diese läuft?

    Das bringt dir gar nichts, denn wenn der Viewport höher ist als 1600 Pixel, dann ist der Übergang immer zu sehen.

    Stattdessen: Hintergrundbild nur horizontal wiederholen und als Hintergrundfarbe die Farbe angeben, die das Hintergrundbild unten hat.

    BTW, warum ist das Hintergrundbild 2 Pixel breit und nicht nur 1 Pixel?

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. Hallo Gunnar

      BTW, warum ist das Hintergrundbild 2 Pixel breit und nicht nur 1 Pixel?

      Vielleicht weil es mit einem Pixel Breite keine nennenswert geringere Dateigröße hätte, oder/und diese auch bei zwei Pixeln Breite noch unter einem kB liegt.
      Hintergrundbilder sollten auch nicht kleiner als sinnvoll sein, weil es besonders auf etwas leistungsschwächeren Systemen beim Seitenaufbaus oder beim Scrollen durchaus zu merken ist, ob der Hintergrund doppelt so oft gekachelt werden muss.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. @@Detlef G.:

        nuqneH

        Hintergrundbilder sollten auch nicht kleiner als sinnvoll sein, weil es besonders auf etwas leistungsschwächeren Systemen beim Seitenaufbaus oder beim Scrollen durchaus zu merken ist, ob der Hintergrund doppelt so oft gekachelt werden muss.

        OK, dann könnte man das Hintergrundbild (GIF) auch 4711 Pixel breit machen. IIRC komprimiert GIF zeilenweise: Ob eine einfarbige Zeile 1, 2 oder 4711 Pixel breit ist, ist für die Dateigröße egal.

        Allerdings frisst es beim Client dann wohl Speicher, da es nach der Dekompression wieder als Bitmap vorliegt.

        Was wäre dann ein guter Kompromiss?

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        1. Hallo,

          OK, dann könnte man das Hintergrundbild (GIF) auch 4711 Pixel breit machen. IIRC komprimiert GIF zeilenweise: Ob eine einfarbige Zeile 1, 2 oder 4711 Pixel breit ist, ist für die Dateigröße egal.

          nicht ganz, da GIF keine RLE-Codierung verwendet, sondern eine Variante von LZW.
          Richtig ist allerdings, dass GIF nur zeilenweise komprimiert und eine sehr schmale, aber hohe Grafik mit einheitlichen Zeilen daher eine größere Datei erzeugt als eine breite, aber dafür sehr niedrige mit gleicher Pixelanzahl.

          Was wäre dann ein guter Kompromiss?

          Da manche Grafikformate (z.B. JPEG, AFAIR auch PNG) auf 8x8 großen Zellen arbeiten, verwende ich für solche Zwecke gern Bildabmessungen, die Vielfache von 8 sind. Das ist bei JPEG und PNG vorteilhaft, bei GIF schadet es zumindest nicht.

          So long,
           Martin

          --
          Es gibt Tage, da gelingt einem einfach alles.
          Aber das ist kein Grund zur Sorge; das geht vorbei.
          1. Hallo.

            Da manche Grafikformate (z.B. JPEG, AFAIR auch PNG) auf 8x8 großen Zellen arbeiten, verwende ich für solche Zwecke gern Bildabmessungen, die Vielfache von 8 sind. Das ist bei JPEG und PNG vorteilhaft, bei GIF schadet es zumindest nicht.

            Auf PNG trifft das nicht zu. Dass das Extrembeispiel auf Vielfachen von 8 aufbaut, ist ein Erbe der dort demonstrierten Farbtiefe.
            MfG, at

        2. Hallo.

          OK, dann könnte man das Hintergrundbild (GIF) auch 4711 Pixel breit machen. IIRC komprimiert GIF zeilenweise: Ob eine einfarbige Zeile 1, 2 oder 4711 Pixel breit ist, ist für die Dateigröße egal.

          Allerdings frisst es beim Client dann wohl Speicher, da es nach der Dekompression wieder als Bitmap vorliegt.

          Was wäre dann ein guter Kompromiss?

          Du meinst den Kompromiss aus der Leistungsfähigkeit des Client-Sytems, das der Anbieter nicht kennt, und der Bandbreite zwischen Client und Server, die beide Seiten nicht hinreichend schnell verlässlich ermitteln können? Klingt nach: Schwer zu sagen, oder? Da kann man nur schätzen und herumprobieren.
          Generell gilt aber sicher: Eine Seite, die viel Leistung erfordert, etwa wegen des massiven Einsatzes von Javascript, sollte nicht auch noch durch das Kacheln von Quadratpixeln belastet werden. Auf der anderen Seite muss man die Bandbreite bei großen Datenmengen und statischem Layout, typischerweise bei Videoportalen, nicht durch große Bilder aufpumpen.
          MfG, at

  4. Vorerst ein dickes Dankeschön an die zahlreichen Antworten.

    Ja das ist schon richtig, dass ich 2px genommen habe um beim Clienten ein wenig Ressourcen beim Zusammensetzen bzw. Aneinanderreihen einsparen wollte.
    Darum geht es mir aber hier nicht.

    Mir ging es darum, ob es mir einer yx Aneinanderreihung dennoch möglich ist die Grafik auf den sichtbaren Bildschirmbereich zu fixieren?
    (Obgleich eine Aneinanderreihung der Grafik bei 1600px auf der y-Achse ja völlig bzw. mehr als ausreichen würde um den sichtbaren Bereich zu füllen.)

    Ist der Bereich nach einer Aneinanderreihung denn überhaupt fixierbar?
    Also so, dass die 2px nebeneinader aneinandergereiht sind und nach ausfüllen dieses Bereiches als dynamisch ganze Grafik fixiert ist und der überhängende Inhalt des Contents über diese Grafik "schwebt" beim scrollen?
    Oder klappt das Schema nur bei einer voll ausgefüllten Grafik mit 1024x768px / 800x600px.

    1. Hallo.

      Mir ging es darum, ob es mir einer yx Aneinanderreihung dennoch möglich ist die Grafik auf den sichtbaren Bildschirmbereich zu fixieren?
      (Obgleich eine Aneinanderreihung der Grafik bei 1600px auf der y-Achse ja völlig bzw. mehr als ausreichen würde um den sichtbaren Bereich zu füllen.)

      Ist der Bereich nach einer Aneinanderreihung denn überhaupt fixierbar?
      Also so, dass die 2px nebeneinader aneinandergereiht sind und nach ausfüllen dieses Bereiches als dynamisch ganze Grafik fixiert ist und der überhängende Inhalt des Contents über diese Grafik "schwebt" beim scrollen?
      Oder klappt das Schema nur bei einer voll ausgefüllten Grafik mit 1024x768px / 800x600px.

      Wie ich sehe, hast du:
      ( ) die referenzierten Artikel gelesen und verstanden
      ( ) gesehen, was unterschiedlicher Code auf deinem Bildschirm bewirkt
      (o) Däumchen gedreht
      Was erwartest du eigentlich?
      MfG, at