Hintergrundbild per CSS ausrichten

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Hintergrundbild per CSS ausrichten

    Hallo,

    ich schaffe es nicht, dass Mozilla das Hintergrundbild voll und mittig anzeigt. Der IE stellt die seite so dar, wie ich mir das vorstelle.
    Sieht jemand meinen Fehler? und kann mir weiterhelfen?

    Link www.fxae.de/testarea3/

    Quelltext:

    PHP-Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Language" content="de" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
          <title>RECHTECK.EU</title>
            <style type="text/css">
            
             *{
             padding:0; 
             margin:0;
             }
             
             body { 
             background-color:#ffffff; 
             background-image:url(./hintergrund.jpg); 
             background-repeat:no-repeat; 
             background-position: 50% 50%; 
             font-family:Arial,sans-serif; 
             scrollbar-arrow-color: #808080; 
             scrollbarBaseColor: #000000; 
             scrollbar-track-color: #000000; 
             scrollbar-face-color: #000000; 
             scrollbar-highlight-color: #808080; 
             scrollbar-3dlight-color: #000000; 
             scrollbar-darkshadow-color: #000000; 
             scrollbar-shadow-color: #808080; 
             }
             
             table {
             border-width:1px; 
             border-style:solid; 
             border-color:#808080; 
             border-collapse:collapse; 
             }
             
             td { 
             border-width:1px; 
             border-style:solid; 
             border-color:#808080; 
             }
             
             input { 
             border:1px solid #808080; 
             background-color:#ffffff; 
             font-family:Arial,sans-serif; 
             font-size:8pt; 
             color:#808080; 
             }
             
             a:link { 
             color:#FFFFFF; text-decoration:none; 
             }
             
             a:visited { 
             color:#FFFFFF; text-decoration:none;  
             }
             
             a:hover { 
             color:#c0c0c0; text-decoration:none; 
             }
             
             a:active { 
             color:#FFFFFF; 
             }
             
             a:focus { 
             color:#FFFFFF; 
             }
             
             .platzfueller { 
             display:block; 
             }
             
             .fontnavigation { 
             font-family:Arial,sans-serif; 
             font-size:75%; 
             color:#808080; 
             }
             
             .usarchitekt { 
             font-family:Arial,sans-serif; 
             font-size:140%; 
             color:#FFFFFF; 
             padding:0px; 
             text-align:justify; 
             letter-spacing:9px; 
             }
             
             .usnavigation { 
             font-family:Arial,sans-serif; 
             font-size:75%; 
             color:#FFFFFF; 
             }
             
             .unterschrift { 
             font-family:Arial,sans-serif; 
             font-size:85%; 
             color:#FFFFFF; 
             }
             
             .usnavigationaktiv { 
             font-family:Arial,sans-serif; 
             font-size:75%; 
             color:#c0c0c0; 
             }
             
             .projektname { 
             font-family:Arial,sans-serif; 
             font-size:95%; 
             color:#FFFFFF; 
             text-align: justify; 
             vertical-align:top; 
             }
             
             .ueberschrift { 
             font-family:Arial,sans-serif; 
             font-size:75%; 
             color:#FFFFFF; 
             text-align:left; 
             }
             
             .text { 
             font-family:Arial,sans-serif; 
             font-size:75%; 
             color:#FFFFFF; 
             text-align: justify; 
             }
             
             #mainbox { 
             width: 942px; height: 460px; 
             overflow:visible;
             border:1px solid #000; 
             background-color: transparent; 
             position: absolute; 
             left: 50%; 
             top: 50%; 
             margin-left: -471px; 
             margin-top: -230px; 
             }
     
            </style>
          </head>
          <body>
              <div id="mainbox">
                <table>
                  <tr>
                    <td>
                      1
                    </td>
                  </tr>
                  <tr>
                    <td>
                      2
                    </td>
                  </tr>
                  <tr>
                    <td>
                      3
                    </td>
                  </tr>
                  <tr>
                    <td>
                      4
                    </td>
                  </tr>
                </table>
              </div>
            </body>
            
            </html>
    Wer Rechtschreibfehler findet, darf sie behalten

  • #2
    schon mal überlegt, dass ein paar höhenangabe fehlen?
    PHP-Code:
    htmlbody
    {
       
    height100%;

    btw: ist von aufbau her eher suboptimal. erstelle ein entsprechendens div und bau das bild dort als hintergrund hinein. da sparst du dir später eine menge ärger

    peter
    Zuletzt geändert von Kropff; 02.05.2007, 22:17.
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      habs in eine eigene box gelegt.

      Besten Dank!
      Wer Rechtschreibfehler findet, darf sie behalten

      Kommentar

      Lädt...
      X