Binehi: Hintergrundbild unterschiedlich groß in Firefox und IE

Hallo,
in meinem ersten Versuch sieht die Seite im Firefox ordentlich aus - Text passt schön in den Hintergrund-Rahmen.
Im IE allerdings ist das Hintergrundbild vile größer, so dass der Text über den Rahmen hinausgeht.
Woran kann dies liegen?

Firefox:
#################
####  Text

IE:
#################
######Text

Viele Grüße
Binehi
(Bin neu hier)

  1. Om nah hoo pez nyeetz, Binehi!

    Woran kann dies liegen?

    Da gibt es sehr viele verschiedene Möglichkeiten. Das beste wäre ein Link auf die betreffende Seite.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bache und Bachelor.

    1. Da gibt es sehr viele verschiedene Möglichkeiten. Das beste wäre ein Link auf die betreffende Seite.

      Ich habe das HTML-Dokument nur auf meinem Rechner und noch keinen Account im Internet.
      g.
      Binehi

      1. Hallo,

        Da gibt es sehr viele verschiedene Möglichkeiten. Das beste wäre ein Link auf die betreffende Seite.
        Ich habe das HTML-Dokument nur auf meinem Rechner und noch keinen Account im Internet.

        dann solltest du ein möglichst abgespecktes Beispiel (HTML und CSS) hier posten.
        Reduziere den Code dabei bitte so weit wie möglich, aber so, dass das Problem noch zu sehen ist.

        Ciao,
         Martin

        --
        Die letzten Worte des Hardware-Bastlers:
        Das Netzkabel lass ich wegen der Erdung lieber dran.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. مرحبا

        Ich habe das HTML-Dokument nur auf meinem Rechner und noch keinen Account im Internet.

        Brauchst du nicht.

        Bilder hochladen (kannst du später wieder löschen)
        HTML und CSS einfügen
        Hier verlinken.

        mfg
        --

        1. HTML:

            
          <html>  
          <head>  
          <title>Background-image</title>  
          <style type="text/css">  
          body  
          {  
              background-image: url("test.jpg");  
              background-size: 100%;  
          }  
          </style>  
          </head>  
          <body>  
          </body>  
          </html>  
          
          

          Bild hier

  2. Jetzt habe ich die Ursache aber leider nicht die Erklärung hierfür.

    Ich habe angegeben:
    background-size: 100%;
    Wenn ich dies weglasse, wird im Firefox das Hintergrundbild so wie im IE.

    1. Om nah hoo pez nyeetz, Binehi!

      background-size: 100%;
      Wenn ich dies weglasse, wird im Firefox das Hintergrundbild so wie im IE.

      background-size ist eine relativ neue Eigenschaft, die der IE erst ab Version 9 kennt. Mehr lässt sich ohne Kenntnis des Codes nicht sagen.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Helm und Helmut.

      1. background-size ist eine relativ neue Eigenschaft, die der IE erst ab Version 9 kennt. Mehr lässt sich ohne Kenntnis des Codes nicht sagen.

        Code hier

        1. Om nah hoo pez nyeetz, Binehi!

          background-size ist eine relativ neue Eigenschaft, die der IE erst ab Version 9 kennt. Mehr lässt sich ohne Kenntnis des Codes nicht sagen.

          Code hier

          Wenn es sich um einen IE < 9 handelt, kann der mit der Angabe background-size nichts anfangen.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schach und Schachtelmacher.

          1. Hallo!
            Die Ursache ist folgende.
            Das Hintergrund ist breiter als meine Bildchirmbreite. Durch das 100% wird es im Firefox offensichtlich zusammengedrückt (verschmälert).
            Wie kann ich aber die Bildschirmbreite herausfinden, damit ich das Hintergrundbild genau so breit machen kann?
            Und wenn jemand dann dieses Bild auf einem kleineren Bildschirm ansieht?
            Gruß
            Binehi

            1. Om nah hoo pez nyeetz, Binehi!

              Ich habe keine Lust, hier ins Blaue hinein zu raten oder dir allgemeine Hinweise zu geben, die möglicherweise nicht zutreffen. Du hast dich noch nicht einmal geäußert, um welchen IE es sich handelt. Versuche die Seite online zu bringen oder jsfiddle zu verwenden. bplaced.net wäre eine Möglichkeit, die komplette Seite zu zeigen. Dann lässt sich dir konkret helfen.

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen nord und Norderney.

              1. ... vollständig gezeigt wird - egal auf welchem Bildschirm?

                Ich habe keine Lust, hier ins Blaue hinein zu raten oder dir allgemeine Hinweise zu geben, die möglicherweise nicht zutreffen. Du hast dich noch nicht einmal geäußert, um welchen IE es sich handelt.

                Das Thema IE ist doch jetzt nicht mehr relevant!

                Versuche die Seite online zu bringen oder jsfiddle zu verwenden.

                Die wenigen Textzeilen sind doch hier gepostet und der Link zum Bild ebenfalls.
                Gruß
                Binehi

            2. Moin,

              Das Hintergrund ist breiter als meine Bildchirmbreite. Durch das 100% wird es im Firefox offensichtlich zusammengedrückt (verschmälert).

              ja, und in anderen modernen Browsern auch - wie Matthias herausgefunden hat, sogar im IE9+.

              Wie kann ich aber die Bildschirmbreite herausfinden, damit ich das Hintergrundbild genau so breit machen kann?

              Die Bildschirmbreite ist irrelevant; du meinst allenfalls die Breite der Anzeigefläche im Browserfenster. Aber das nützt ja auch nichts, wenn der Browser das Hintergrundbild nicht skalieren kann.

              Du hast also grundsätzlich zwei Alternativen:

              Die einfache: Nimm achselzuckend hin, dass es auf älteren Browsern nicht optimal aussieht.

              Die aufwendige: Verabschiede dich von *einem* Hintergrundbild, und versuche stattdessen, das gewünschte Aussehen mit mehreren Bildern zu realisieren, die sich dann nahtlos zusammenfügen. Die kannst du dann unterschiedlichen Elementen zuordnen, so dass die Teile des Bildes mit der Veränderung der Fenstergröße oder Zoomstufe mitlaufen. Bei grafisch einfachen Strukturen kannst du eventuell auch Rahmenlinien oder Hintergrundfarben mit einbeziehen. Wenn du mal ein bisschen mehr zeigen würdest, könnte man gemeinsam überlegen, wie man das erreichen kann.

              So long,
               Martin

              --
              "Wie geht eigentlich dein neues Auto?"
              "Es geht nicht, es fährt!"
              "Äh, ja. Und wie fährt es?"
              "Och, es geht."
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. Tach!

                Wenn du mal ein bisschen mehr zeigen würdest, könnte man gemeinsam überlegen, wie man das erreichen kann.

                Mehr als hier gezeigt (nur dass der Hintergrundrahmen nicht schwarz ist) habe ich ja noch nichts, da ich erst anfange. Und da ich gelesen habe, dass es leider große Unterschiede zwischen den Browsern gibt, habe ich es mit mehreren versucht und bin dann auf dieses Problem gestoßen.
                Aber die Lösung, wie man einen Hintergrund "optimal" an verschiede Browserfenster anpasst, hast Du ja bereits erläutert. Mal sehen, ob ich es schaffe, mehrere Bilder als Hintergund anzugeben. Bisher habe ich nur background-image: ......jpg u.ä. gefunden.
                Gruß
                Binehi

                1. Hi,

                  Wenn du mal ein bisschen mehr zeigen würdest, könnte man gemeinsam überlegen, wie man das erreichen kann.
                  Mehr als hier gezeigt (nur dass der Hintergrundrahmen nicht schwarz ist) habe ich ja noch nichts, da ich erst anfange.

                  ah ja, gut, das hat den Vorteil, dass du noch keine große Mühe über den Haufen werfen musst.

                  Und da ich gelesen habe, dass es leider große Unterschiede zwischen den Browsern gibt, habe ich es mit mehreren versucht und bin dann auf dieses Problem gestoßen.

                  Das mit den großen Unterschieden betrifft hauptsächlich den IE, und auch den vor allem in den älteren Versionen. Ab IE8 ist der schon einigermaßen bei der Musik, und IE9 oder IE10 sind, wie man ab und zu liest, schon ungefähr auf Augenhöhe mit Firefox, Chrome oder Opera.

                  Aber die Lösung, wie man einen Hintergrund "optimal" an verschiede Browserfenster anpasst, hast Du ja bereits erläutert. Mal sehen, ob ich es schaffe, mehrere Bilder als Hintergund anzugeben. Bisher habe ich nur background-image: ......jpg u.ä. gefunden.

                  Ja, das meinte ich in der Hauptsache auch. Ich hatte Hintergrundfarben und/oder Rahmen deshalb erwähnt, weil man damit auch einfache grafische Strukturen nachbilden kann, etwa wenn man eigentlich nur eine Trennlinie haben möchte.

                  Es gibt noch die Möglichkeit, *einem* Element mehrere Hintergrundbilder zuzuweisen, das ist aber ebenso wie background-size relativ neu und wird von älteren IE-Versionen nicht unterstützt. Würde dir also nicht helfen. Stattdessen lohnt es sich vermutlich, die HTML-Struktur kritisch anzuschauen. Was für den Besucher wie *ein* Element wirkt (etwa eine Textbox), sind ja oft mehrere HTML-Elemente, die eine Gruppe bilden. Da könnte man eben jedem Element der Gruppe ein Hintergrundbild verpassen, und wenn man das geschickt auswählt, kann das recht überzeugend wirken.

                  So long,
                   Martin

                  --
                  In der Theorie stimmen Theorie und Praxis genau überein.
                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(