toastbrot: Funktioniert im FF nicht

Hi ich habe im Photoshop eine Hintergrundbild erstellt, größe 900x700px.
Ich wollte es in der Mitte positionieren und hab das mit folgendem Befehl realisiert.

background-image: url(../Bilder/tutgut.png);
   background-position: center;
 background-repeat: no-repeat;
 background-color: #8DB801;

das Problem ist, dass es im Firefox nicht funktioniert, im IE dagegen schon. Wenn ich die Positionierung weglasse funktionert es aber sobald da center steht ist das Bild weg. Woran liegt das? Kennt firefox den Befehl nicht? Kann ich das Bild anders in der Mitte platzieren?

Grüße und danke für die Hilfe

  1. Hi,

    background-image: url(../Bilder/tutgut.png);
       background-position: center;
    background-repeat: no-repeat;
    background-color: #8DB801;

    kurz nachgefragt: Auf welches Element hast du die Background-Eigenschaften angewendet, und welche evt. noch?

    Gruß Gunther

    1. Hi also das mit 50% 50% funktioniert auch nicht, ebensowenig we 50%.

      Ich weiß leider nicht genau was du meinst Gunther. Ich habe erst angefangen mit der Seite und noch nicht viel definiert.

      Das ist alles was ich bisher habe:

      *{
       padding:0px;
       margin:0px;
      }

      body{
       background-image: url(../Bilder/tutgut.png);
              background-position: center;
       background-repeat: no-repeat;
       background-color: #8DB801;
       font-family: Trebuchet MS, Verdana, Arial, sans-serif;
       font-size: 80%;
      }

      #inhalt{
        width: 580px;
        height: 500px;
        position: absolute;
        top: 238px;
        left: 380px;
        color: #fff;
        overflow: auto;
      }

      Hi,

      background-image: url(../Bilder/tutgut.png);
         background-position: center;
      background-repeat: no-repeat;
      background-color: #8DB801;

      kurz nachgefragt: Auf welches Element hast du die Background-Eigenschaften angewendet, und welche evt. noch?

      Gruß Gunther

      1. Hi,

        Das ist alles was ich bisher habe:

        *{
        padding:0px;
        margin:0px;
        }

        body{
        background-image: url(../Bilder/tutgut.png);
                background-position: center;
        background-repeat: no-repeat;
        background-color: #8DB801;
        font-family: Trebuchet MS, Verdana, Arial, sans-serif;
        font-size: 80%;
        }

        #inhalt{
          width: 580px;
          height: 500px;
          position: absolute;
          top: 238px;
          left: 380px;
          color: #fff;
          overflow: auto;
        }

        füge davor noch ein:

          
          
        html, body {  
           height: 100%;  
           width: 100%;  
          }  
        
        

        Gruß Gunther

      2. Hi,

        #inhalt{

        ist das Element mit der id "inhalt" das einzige, was sich im body befindet?

        Wenn ja, wäre wegen

        position: absolute;

        die Höhe von body 0, da sich nichts darin befindet, was eine Auswirkung auf seine Höhe hätte.

        Wenn body also eine Höhe von 0 hat, ist damit natürlich auch der sichtbare Bereich des im body befindlichen Hintergrundbildes 0px hoch ...

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi ich habe zwar nicht genau verstanden was MudGuard gemeint aht aber mit dem Tipp von Andreas hat das wunderbar funktioniert:-D
          Vielen Vielen dank, ich wäre nicht selber darauf gekommen.

          So und nun wünsch ich euch ein guts nächtle., jetzt kann ich in Ruhe schlafen

          Grüße

          Hi,

          #inhalt{

          ist das Element mit der id "inhalt" das einzige, was sich im body befindet?

          Wenn ja, wäre wegen

          position: absolute;

          die Höhe von body 0, da sich nichts darin befindet, was eine Auswirkung auf seine Höhe hätte.

          Wenn body also eine Höhe von 0 hat, ist damit natürlich auch der sichtbare Bereich des im body befindlichen Hintergrundbildes 0px hoch ...

          cu,
          Andreas

          1. Kurze Korrektur: ich meinte natürlich Tipp vn Gunther, sorry

          2. Hallo

            Hi ich habe zwar nicht genau verstanden was MudGuard gemeint aht aber mit dem Tipp von [Gunther] hat das wunderbar funktioniert:-D
            Vielen Vielen dank, ich wäre nicht selber darauf gekommen.

            Genau das Gleiche hat dir MudGuard aus einem anderen Blickwinkel gesagt. Du hattest dem <body> keine Angaben zu Breite und Höhe gegeben.

            Da du dein Inhaltselement mit position:absolute; aus dem normalen Dokumentfluss herausgenommen hast, wurde der <body> auch nicht auf irgendeine von 0 unterschiedliche Größe gebracht.

            In einem Element (hier <body>), welches 0 mal 0 Pixel groß ist, kann aber kein Hintergrundbild angezeigt werden.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.1
            1. Achso jetzt habe ich das auch erstanden. DAnke für die Erklärung!

              1. Hallo

                ... jetzt habe ich das auch erstanden.

                Wieviel hat's gekostet? ;-)
                *scnr*

                Tschö, Auge

                --
                Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                (Victor Hugo)
                Veranstaltungsdatenbank Vdb 0.1
  2. Hallo
    schonmal so probiert:
    background-position:50% 50%;??

    MFG Hagen

    1. Hallo Hagen.

      schonmal so probiert:
      background-position:50% 50%;??

      Ist äquivalent zu „background-position:center center“ ist äquivalent zu „background-position:center“.

      Einen schönen Donnerstag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]