Tom74269: Hintergrund mit css

Hallo zusammen,

ich möchte den Hintergrund einer Webseite durch einige Quadrate gestalten, die sich in x-Richtung periodisch wiederholen sollen.

Nun möchte ich dies nicht mittels eines quadrate.gif und

<body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>

realisieren, sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:

<div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">  
  <div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>  
  <div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>  
</div>

Ist es möglich das <div> analog zu repeat-x periodisch zu wiederholen?
Alternativen zu meinem Ansatz einer periodischen Wiederholung des <div> sind willkommen.

Viele Grüße und tausend Dank!
Tom

  1. @@Tom74269:

    nuqneH

    Nun möchte ich dies nicht mittels eines quadrate.gif und

    <body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>

    realisieren,

    Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.

    Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?

    sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:

    <div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">

    <div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
      <div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
    </div>

      
    Das in eine Vektorgrafik übersetzt sieht so aus:  
      
    ~~~xml
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" width="100" height="100">  
      <rect x="0" y="0" width="0.5" height="0.5" fill="red"/>  
      <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="red"/>  
    </svg>
    

    Speichern als quadrate.svg und im Stylesheet einbinden:
    body { background: url(quadrate.svg) repeat-x }

    Funktioniert in aktuellen Firefox, Opera, Chrome, Safari. (IE kann ich gerade nicht testen.)

    Anmerkung: Schöner wäre es, die Farbe der Quadrate nicht im SVG, sondern auch im Stylesheet anzugeben. Also keine @fill-Attribute, dafür am Anfang:

    <?xml-stylesheet type="text/css" href="default.css" ?>  
    
    

    und im Stylesheet:
    rect { fill: red }

    Ruft man die SVG-Grafik direkt im Browser auf, funktioniert das auch. Als Hintergrundbild eingebunden färbt jedoch nur Opera die Quadrate.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@Gunnar Bittersmann:

      nuqneH

      Funktioniert in aktuellen Firefox, Opera, Chrome, Safari. (IE kann ich gerade nicht testen.)

      Nachtrag: Funktioniert in IE ab 9, Firefox ab 4.

      Als Hintergrundbild eingebunden färbt jedoch nur Opera die Quadrate.

      Auch der IE 9 macht dies richtig.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
    2. Hi und vielen Dank für die Kommentare!

      Nun möchte ich dies nicht mittels eines quadrate.gif und

      <body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>

      realisieren,

      Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.

      Natürlich ist es sinnvoll den Hintergrund global in einem Stylesheet zu definieren. Aber an meinem Problem würde das nichts ändern, oder verstehe ich dich jetzt falsch?

      Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?

      Naja, auch als Vektorgrafik werden es nur wenige Byte sein. Eine solche bietet den Vorteil, dass sie in allen Zoom-Stufen perfekt aussieht.

      sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:

      <div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">

      <div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
        <div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
      </div>

      
      >   
      > Das in eine Vektorgrafik übersetzt sieht so aus:  
      >   
      > ~~~xml
      
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
      
      > <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" width="100" height="100">  
      >   <rect x="0" y="0" width="0.5" height="0.5" fill="red"/>  
      >   <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="red"/>  
      > </svg>
      
      

      Speichern als quadrate.svg und im Stylesheet einbinden:
      body { background: url(quadrate.svg) repeat-x }

      Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

      Grüße
      Tom

      1. Hi!

        Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

        Nicht? Oehm. Da weisst Du mehr als mein IE8. Wenn Du IE6 meinst, ist das total wurst.

        --
        Vergesst Chuck Norris.
        Sponge Bob kann unter Wasser grillen!
        1. @@Steel:

          nuqneH

          Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

          Nicht? Oehm. Da weisst Du mehr als mein IE8.

          Nicht. Oder dein IE 8 weiß mehr als meiner. Öhm.

          Oder zeigt dein IE 8 bei diesem Test den Hintergrund an?

          (Ich hab nur bei einem Quadrat ein @fill-Attribut gesetzt, um den Unterschied zwischen Opera und IE 9 einerseits und Firefox und Webkits andererseits darzustellen. Auch der brandneue Chrome 11 stylt SVG als Hintergrundbild nicht.)

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Moin!

            Oder zeigt dein IE 8 bei diesem Test den Hintergrund an?

            Er laedt eine CSS Datei, die in Notepad falsch dargestellt wird. (Rechtecke, wo wahrscheinlich Umbrueche sein sollten)

            --
            Vergesst Chuck Norris.
            Sponge Bob kann unter Wasser grillen!
            1. Er laedt eine CSS Datei, die in Notepad falsch dargestellt wird. (Rechtecke, wo wahrscheinlich Umbrueche sein sollten)

              [ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt
              [ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt

              Mehrfachauswahl möglich :p

              1. Wird aber nunmal geoeffnet.

                --
                Vergesst Chuck Norris.
                Sponge Bob kann unter Wasser grillen!
                1. Wird aber nunmal geoeffnet.

                  Ja, weil du vermutlich deinem Windows nicht sagst, was dein Standard-Texteditor ist - den verwendet der Internet Explorer automatisch.

                  1. Wird aber nunmal geoeffnet.

                    Ja, weil du vermutlich deinem Windows nicht sagst, was dein Standard-Texteditor ist - den verwendet der Internet Explorer automatisch.

                    Doch klar: Notepad

                    Ich werd sicher nicht Word nehmen.

                    --
                    Vergesst Chuck Norris.
                    Sponge Bob kann unter Wasser grillen!
                    1. Ja, weil du vermutlich deinem Windows nicht sagst, was dein Standard-Texteditor ist - den verwendet der Internet Explorer automatisch.

                      Doch klar: Notepad

                      Ich werd sicher nicht Word nehmen.

                      Das hat auch keine verlangt - aber was spricht gegen Notepad++, PSPad oder sonstwas?

                      1. Hoi,

                        Ich werd sicher nicht Word nehmen.

                        Das hat auch keine verlangt - aber was spricht gegen Notepad++, PSPad oder sonstwas?

                        Das die nicht bei mir installiert sind. Die alte Leier.

                        --
                        Vergesst Chuck Norris.
                        Sponge Bob kann unter Wasser grillen!
            2. PS:

              (das kommt von zu schnellem abschicken)

              Ein FF 3.6 zeigt tatsaechlich eine Seite mit lorem ipsum... ohne Hintergrund.

              --
              Vergesst Chuck Norris.
              Sponge Bob kann unter Wasser grillen!
              1. @@Steel:

                nuqneH

                Ein FF 3.6 zeigt tatsaechlich eine Seite mit lorem ipsum... ohne Hintergrund.

                Ja, das erwähnte ich schon.

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Die Seite bekomme ich allerdings nicht mit dem IE. Nur das CSS File.

                  --
                  Vergesst Chuck Norris.
                  Sponge Bob kann unter Wasser grillen!
            3. @@Steel:

              nuqneH

              Oder zeigt dein IE 8 bei diesem Test den Hintergrund an?

              Er laedt eine CSS Datei

              Kann ich in meinem IE nicht nachvollziehen. Möglicherweise hat deiner andere Präferenzen im Accept-Feld im HTTP-Header oder kommt mit content negotiaion nicht klar. Probier mal mit Endung .html!

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Hi!

                Kann ich in meinem IE nicht nachvollziehen. Möglicherweise hat deiner andere Präferenzen im Accept-Feld im HTTP-Header oder kommt mit content negotiaion nicht klar. Probier mal mit Endung .html!

                Funzt! ;) Ohne Hintergrundbilder.

                --
                Vergesst Chuck Norris.
                Sponge Bob kann unter Wasser grillen!
                1. @@Steel:

                  nuqneH

                  Kann ich in meinem IE nicht nachvollziehen. Möglicherweise hat deiner andere Präferenzen im Accept-Feld im HTTP-Header oder kommt mit content negotiaion nicht klar. Probier mal mit Endung .html!

                  Funzt! ;)

                  Das war’s also.

                  Ich hab dann mal alle test*.css in default*.css und alle test*.svg in qudrate*.svg umbenannt. Jetzt sollte es auch im IE ohne Endung .html funzen.

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
        2. Hi!

          Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

          Nicht? Oehm. Da weisst Du mehr als mein IE8. Wenn Du IE6 meinst, ist das total wurst.

          Habe mich da auf Wikipedia (dt+engl) verlassen. Dort steht, dass erst der IE9 svg nativ unterstützt. Bei älteren Versionen soll die zusätzliche Installation eines plugins notwendig sein.

          Grüße
          Tom

          1. Hi!

            Nun. Plugins dafuer kann ich bei dem hier nicht finden. Privat nutze ich IE nicht, hab also nur den hier, der evtl. stark vergewaltigt wurde. Deshalb kann meine Aussage durchaus falsch sein.

            --
            Vergesst Chuck Norris.
            Sponge Bob kann unter Wasser grillen!
            1. @@Steel:

              nuqneH

              Privat nutze ich IE nicht, hab also nur den hier, der evtl. stark vergewaltigt wurde.

              Und, zeigt der SVG _als Hintergrundbild_ an?

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Hoi,

                Privat nutze ich IE nicht, hab also nur den hier, der evtl. stark vergewaltigt wurde.

                Und, zeigt der SVG _als Hintergrundbild_ an?

                Bei deinem Test gibts keinen Hintergrund, weil CSS Dateien keinen Hintergrund haben. Mehr bekomme ich da ja nicht. Ich geh also mal kuehn davon aus, das das mit dem Background gar nicht klappt.

                --
                Vergesst Chuck Norris.
                Sponge Bob kann unter Wasser grillen!
      2. Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

        Den und seine Kollegen abwärts kannst du ja mit VML füttern.

      3. @@Tom74269:

        nuqneH

        Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.

        Aber an meinem Problem würde das nichts ändern, oder verstehe ich dich jetzt falsch?

        An diesem Problem nicht. Aber mit Inline-Styles schaffst du dir haufenweise anderer Probleme (Wartbarkeit, Wiederverwendbarkeit).

        Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?

        Naja, auch als Vektorgrafik werden es nur wenige Byte sein. Eine solche bietet den Vorteil, dass sie in allen Zoom-Stufen perfekt aussieht.

        Hm, Skalieren von Grafiken mit ausschließlich horizontalen und vertikalen Kanten sollten Browser doch halbwegs hinbekommen, oder? Würde ein Pixel Rosa zwischen Rot und Weiß den Hintergrund zur Unschärfe verschwimmen lassen?

        Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

        Grafik als Fallback für Browser, die SVG-Hintergrund nicht unterstützen:

        body  
        {  
          background: url(quadrate.png) repeat-x;  
          background: url(quadrate.svg) repeat-x, url(quadrate.svg) repeat-x;  
        }
        

        Browser, die multiple Hintergrundbilder unterstützen, bekommen SVG; die anderen eine Rastergrafik.

        Dummerweise bleibt Firefox 3.6 dabei auf der Strecke, da er multiple Hintergrundbilder unterstützt, aber keine SVG-Hintergrundbilder.

        Also für Firefox Rastergrafik setzen, für den 4er jedoch mit SVG überschreiben. Muss sich nur noch ein Selektor finden, den der 3.6er nicht kennt … da ha’m wa’n ja:

        body, x:-moz-any-link  
        {  
        	background: url(quadrate.png) repeat-x;  
        }  
          
        body:not(:indeterminate), x:-moz-any-link  
        {  
        	background: url(quadrate.svg) repeat-x;  
        }
        

        Test 3

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. @@Gunnar Bittersmann:

          nuqneH

          Grafik als Fallback für Browser, die SVG-Hintergrund nicht unterstützen:

          Ähm, SVG ist selbst nur Fallback für die reine CSS-Lösung.

          Also für Firefox Rastergrafik setzen, für den 4er jedoch mit SVG überschreiben.

          Papperlapapp! Firefox kann Gradienten!! Webkits auch. Chrome mittlerweile auch in der Mozilla-Syntax. Opera mittlerweile auch.

          Also einfach zwei Gradienten mit harten Farbübergang per background-position und background-size wirkungsvoll in Szene gesetzt …

          Problemtatisch ist das Setzen von background-size, das nur bei den Gradienten wirken soll. Das müsste also innerhalb der Deklaration als <bg-position>/<bg-size> angegeben werden. Dummerweise versteht das nur Opera. Und glücklicherweise versteht das Opera, denn -o-background-size versteht er nicht. Also für Firefox und Webkits background-size mit Präfixen setzen, sonst stört es die Größe im IE 9.

          Voilà!! Test 4

          Ich hab ein bisschen umgefärbt, damit man sieht, was Sache ist:
          blau: Das ist old school: Rastegrafik (IE < 9)
          grün: Da sind wir im grünen Bereich: SVG (IE 9)
          rot:  Hot! Gradienten (Firefox, Webkits, Opera)

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. @@Gunnar Bittersmann:

            nuqneH

            Also für Firefox und Webkits background-size mit Präfixen setzen, sonst stört es die Größe im IE 9.

            Firefox 4 versteht -moz-background-size nicht mehr, sondern nur noch background-size; background-size darf aber nicht für alle Browser gesetzt werden. Glücklicherweise lässt sich Firefox per Selektor mit proprietärer Pseudoklasse gezielt ansprechen.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
          2. @@Gunnar Bittersmann:

            nuqneH

            http://localhost/test/test4.html

            … und der auch.

            Test 4

            Qapla'

            PS: Zitat 907

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
          3. @@Gunnar Bittersmann:

            nuqneH

            Problemtatisch ist das Setzen von background-size […]

            Eigentlich nicht, wenn man mal richtig nachdenkt.

            Es werden ja schon multiple Hintergründe verwendet, da dürfen es auch ein paar mehr sein:

            background: url(quadrate.svg), none, none;
            background: none, <linear-gradient> 0 0, <linear-gradient> 0 50px;

            Dann kann man für jeden Hintergrund background-size getrennt angeben:

            background-size: auto auto, 100px 50px, 100px 50px;

            Jetzt aber: Test 5

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. @@Gunnar Bittersmann:

              nuqneH

              background-size: auto auto, 100px 50px, 100px 50px;

              Nö, nicht auto, sondern die gewünschten Abmessungen!

              background-size: 100px 100px, 100px 50px, 100px 50px;

              Dann kommen @width und @height aus dem SVG raus und die Größe wird da angegeben, wo’s hingehört: im Stylesheet.

              Test 6

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
        2. @@Gunnar Bittersmann:

          nuqneH

          http://localhost/test/test3.html

          Der war gut …

          Test 3

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
      4. @@Tom74269:

        nuqneH

        Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?

        Naja, auch als Vektorgrafik werden es nur wenige Byte sein.

        BTW: Dateigrößen:

        PNG-8, 2 Farben: 180 Byte

        SVG (ohne @fill, @width, @height): 331 Byte

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
    3. @@Gunnar Bittersmann:

      nuqneH

      <?xml-stylesheet type="text/css" href="default.css" ?>

      Das ist es, womit Firefox und Webkits nicht klarkommen. Mit CSS im SVG-Dokument funktionierts auch in diesen. (Test 2)

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
  2. @@Tom74269:

    nuqneH

    Alternativen zu meinem Ansatz einer periodischen Wiederholung des <div> sind willkommen.

    CSS only!!

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@Gunnar Bittersmann:

      CSS only!!

      Hi Gunnar,

      vielen Dank für deine ausführlichen Kommentare. Ich denke, du hast das Problem trotz der zahlreichen Eigenheiten der Browser elegant gelöst.

      Nochmals vielen Dank und ebenso viele Grüße.
      Tom