Tim0: Anfängerfrage zu Hintergrund(bild)

Hallo,

ich bin neu hier und hoffe, dass mir jem. bei meinem (hoffentlich) CSS-Problem helfen kann. Kurz zur erklärung, ich bin gerade dabei ein eigenes Joomla-Template zu entwickeln,...

Ich habe jetzt eine Hintergundgrafik, die links oben eingeblendet werden soll (Größe ca 1000px X 800px). Das ist der eigentliche "Hintergrund". Mein problem ist jetzt, dass ja rechts (wenn die Homepage soweit "aufgespannt ist der Hintergrund einfach abgeschnitten ist und meine normale Hintergundfarbe kommt.

Ich möchte jetzt, dass rechts von meiner Hintergundgrafk (oder von mirauch auch unter meiner Hintergrundgrafik) eine weitere Grafik aufbaut, die entweder meinen Hintergund "Ausaufen lässt" , sich also variabel bis zum recten rand "aufzieht" oder sich bis ins unendliche (also bis zum rechten Rand) wiederholt.

Skizze: [G1] = Die Grafik die ich einfügen möchte

[Hintergrundbild][       G1      ]
oder
[Hintergrundbild][G1][G1][G1][G1][.....

Momentan mein Hintergundcode in der CSS:
body {
 background: #000 url(../images/body.gif) repeat-x;
 color: #DDD;
 font: normal 62.5% "Trebuchet MS",Verdana,sans-serif;
 padding-left: 90px;
}

Da bewirkt natrlich, dass meine "Hintergundgrafik" im x-repeat widerholt wird, was ich ja aber nicht wirklich will,...

Ich hoffe wirklich, dass mir jem. von euch helfen kann, bin am Verzewifen!
THX und Gruß
Tim0

  1. weitere Grafik aufbaut, die entweder meinen Hintergund "Auslaufen lässt", sich also variabel bis zum recten rand "aufzieht"

    Das ist als Hintergrundattribut nicht möglich und angesichts der miserablen Qualität, die die meisten Browser beim Skalieren von Bitmapgrafiken bieten, möchtest du das vermutlich auch nicht wirklich - sage ich jetzt mal so. Du kannst es dir anschauen, indem du die gewünschte Grafik mittels <img> einbettest und über das width-Attribut dehnst. Das ist dann auch gleichzeitig der einzige Weg, der dir derzeit in der Abteilung "Grafik dehnen" offen steht.

    oder sich bis ins unendliche (also bis zum rechten Rand) wiederholt.

    Verwende repeat-x, diese CSS-Eigenschaft kennst du ja bereits, mit dem <body>-Element und lege die Haupthintergrundgrafik bzw. den Seiteninhalt in einen <div>-Block. NB: Hintergrundgrafiken lassen sich positionieren, damit sie bündig anschließen.

    body {

    font: normal 62.5% "Trebuchet MS",Verdana,sans-serif;

    62.5%? Das ist nicht dein Ernst. Bei den üblichen 10 bis 12 Pixeln Schriftgröße fabrizierst du damit kaum noch zu entziffernden Fliegendreck mit 6 Pixeln Höhe - und das wären noch die Großbuchstaben …

    Merke: Finger weg von der Basisschriftgröße.

    1. Hey, vielen Dank erstmal für die Antwort!

      du sagtest ich solle das als img einbinden, meist du in der css oder in der indy.php und wie genau binde ich das da ein ?

      Du sagtest ich solle das in einen <div>-Block legen, aber diese div-blöcke sind mir bisher nur aus der index.php bekannt,....

      Sorry, wenn ich hier totalen mülle rede, aber ich bin wirklich noch "blutiger" anfänger :-)

      Vielen dank,
      Tim0

      1. Mahlzeit,

        Sorry, wenn ich hier totalen mülle rede, aber ich bin wirklich noch "blutiger" anfänger :-)

        Dem kann man abhelfen.

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      2. du sagtest ich solle das als img einbinden, meist du in der css oder in der indy.php und wie genau binde ich das da ein ?

        <img> gibt es nur in HTML-Dokumenten. Das war auch nur ein Beispiel, damit du sehen kannst, wie Browser dein Bild beim Dehnen verunstalten.

        Du sagtest ich solle das in einen <div>-Block legen, aber diese div-blöcke sind mir bisher nur aus der index.php bekannt,....

        Oh. Vielleicht solltest du erstmal das durchlesen (und nein, mit PHP hat das alles überhaupt nichts zu tun).