Hintergrundbild per CSS ausrichten

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    Last edited by Kropff; 02-05-2007, 21:17.
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Comment


    • #3
      habs in eine eigene box gelegt.

      Besten Dank!
      Wer Rechtschreibfehler findet, darf sie behalten

      Comment

      Working...
      X