background-position und background-attachment kombinieren

  • ich hab folgendes problem:
    ich habe eine tabelle mit 3 spalten, in die mittlere Spalte soll der inhalt der website und die 2 äußeren sollen als Auflösungsausgleich dienen( mit einem Blid als Background)
    bis jetzt habe ich folgendes zu stande bekommen:

    <table width="100%" border="1">
    <tr>
    <td style="background:url(../image/links.jpg) no-repeat; background-position:right 20px ">&nbsp;</td>
    <td width="1000">Inhalt</td>
    <td style="background:url(../image/rechts.jpg) no-repeat; background-position: left 20px">&nbsp;</td>

    </tr>
    </table>

    ich würde jetzt aber gern noch das mit "background-attachment:fixed" kombinieren damit bei längeren Inhalt der Website die Bilder links und rechts nicht mit scrollen doch leider scheint das nicht zu gehen denn immer wenn ich das hinzufüge sind die bilder weg.

    ich hoffe ihr könnet mir dabei helfen

  • Webseiten baut man nicht mit Tabellen auf. Daher ist dein Grundgerüst schon mal grundlegend falsch.

    Ansonsten wäre interessant wie Du "background-attachment: fixed;" eingefügt hast, also den problematischen Code?!

  • erst mal so hatt ich es probiert (funktioniert aber wie gesaget nicht):

    <table width="100%" border="1">
    <tr>
    <td style="background:url(../image/links.jpg) no-repeat; background-position:right 20px; background-attachment:fixed">&nbsp;</td>
    <td width="1000">Inhalt</td>
    <td style="background:url(../image/rechts.jpg) no-repeat; background-position: left 20px; background-attachment:fixed">&nbsp;</td>

    </tr>
    </table>

    und warum ist es falsch eine Website mit Tabellen zu bauen? du kannst mir ja sagen wie es richtig geht. das layout der seite hast du doch bestimmt verstanden. in der Mitte soll der inhalt und recht und links ein bild als ausgleich.

  • Das ist also eine Grafik die eine feste Breite und Höhe hat und immer an der selben Stelle stehen soll. Dann reicht doch folgendes, wenn Du das als einzelne Grafik nimmst und sie nicht zweiteilst:

    HTML:

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
     <title></title>
    </head>
    <body>
     <div id="content">Inhalt in der Mitte</div>
    </body>
    </html>

    CSS:

  • ich werd mal versuchen ob ich damit was anfangen kann. habs vielleicht noch nicht gesagt aber ich bin Anfänger und mache das nur als hobby für meinen fussballverein.

    ich hoffe du schaust später (auch vielleicht morgen) noch mal hier rein wenn ich noch fragen haben sollte

  • irgendetwas stimmt da auch noch nicht

    http://prntscr.com/8hizg

    das bild sollte geteit sein und der inhalt in der mitte.

    HTML-Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    </head>
    <link rel="stylesheet" type="text/css" href="form.css"/>
    <body>
    <div id="content">Inhalt in der Mitte</div>
    </body>
    </html>


    cssCode:

    /* CSS Document */

    body {
    background-image: url(../image/background.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment:fixed
    }

    #content {
    margin: 0 auto;
    width: 1000px;
    }

    wie geht das mit den code fenster?

  • Die Grafik wird natürlich nicht automatisch geteilt. Mein Code-Beispiel bezog sich auf eine Grafik die links die linke Hälfte des Spielfelds hat, in der Mitte dann 1000 Pixel weiße Fläche und rechts die rechte Hälfte des Spielfelds. Die Grafik müsstest Du nur genau so zurechtschneiden.

    Um Quellcode ordentlich zu formatiere, kannst Du im Editor die Icons in der zweiten Reihe rechts (2., 3. und 4. Icon von rechts) verwenden.

  • Danke für deine hilfe, ich hab es jetzt so hin bekommen wie ich es wollte.