Tom78: Backgroundimage, layer backgroundimage & 2 imgs

Hi.

Wie mach ich das am besten?

Mein Header ist 900px breit und 134px hoch. Es soll eine Bannergraphik rein, mit 783px x 132px. Der Rest soll aufgefüllt werden.
Es mit dem Banner als background und background-color zu machen, ist eh logisch. Allerdings brauche ich als Füller keine background-color, sondern eine paar px große Farbgraphik, die dann den Rest auffüllt.

Wie geht das? Also so:

xxxxxxxxxxxyyyy
xxxxxxxxxxxyyyy
xxxxxxxxxxxyyyy

x samt y = Header

xxx = Banner.jpg
y = Rest zum Auffüllen. Nicht mit background-color, sondern backgroundfill.jpg

Kann ich das irgendwie ein ein div reinbringen?

Oder soll ich es so machen, mit zwei Divs, die sich "addieren":

div 1 -> 783px breit, 132 hoch.
div 2 -> 900-783px breit (=Rest) und Beginn mit left: 783px...

  1. Ich habs so gemacht. Kann man das so machen oder sind Fehler drin?
    Die verlinkte stylesheet.css dient nur dazu, Textfarbe, Größe und die Links einzustellen (A, HOVER usw.)

    Ich hab quasi lauter Divelemente zusammengebaut.

    <!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-Type" content="text/html; charset=iso-8859-1" />
    <title>Titel</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>

    <body bgcolor="#e27201" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

    <!-- Begin Header -->
             <div id="top1" style="position:absolute; left:0px; top:0px; width: 783px; height: 134px; background-color: #000099; background-image: url(img/design_top.jpg); background-repeat: no-repeat;"></div>
            <div id="top2" style="position:absolute; left:783px; top:0px; width: 117px; height: 134px; background-image: url(img/bluebackground.jpg);"></div>

    <!-- End Header -->

    <!-- Begin Naviagtion -->
             <div id="menu" style="position:absolute; left:0px; top:134px; width: 900px; height: 30px; background-color: #000000;"></div>

    <!-- End Naviagtion -->

    <!-- Begin Content -->
       <div id="content1" style="position:absolute; left:0px; top:164px; width: 900px; height: 400px; background-color: #000099;"></div>
       <div id="content2" style="position:absolute; left:50px; top:200px; width: 800px; height: 276px; background-image: url(img/start.jpg); background-repeat: no-repeat;"></div>

    <!-- End Content -->

    <!-- Begin Foot -->
       <div id="foot1" style="position:absolute; left:0px; top:564px; width: 900px; height: 30px; background-color: #000000;"></div>
       <div id="foot2" style="position:absolute; left:20px; top:574px;">Homepage by blabalbalbala</div>

    </div>
    </div>

    <!-- End Foot -->

    </body>
    </html>

    1. Hallo!

      Ich würde es mit zwei Divs machen, die nebeneinander stehen und jedes hat ein eigenes Background-Bild.

      Warum nimmst du nicht alle Formatierungen in das CSS-Stylesheet? Das ist ja viel einfacher, wenn du mehrere Seiten mit den gleichen Formatierungen hast. Um etwas zu ändern kannst du nur das CSS-Stylesheet anpassen, und schon sind alle Seiten angepasst. Ausserdem wird dann das HTML-Dokument viel übersichtlicher.

      Lg

  2. Hallo.

    Mein Header ist 900px breit und 134px hoch.

    Ist diese feste Größe beabsichtigt?

    Es soll eine Bannergraphik rein, mit 783px x 132px. Der Rest soll aufgefüllt werden.

    Also soll die Grafik oben links sein und 200px rechts Abstand zum Rand?
    Warum 200px?
    »»sondern eine paar px große Farbgraphik, die dann den Rest auffüllt.
    Generell also background-image.

    Lies Dir dann nochmal durch wozu ein div da ist.

    Welches tag verwendest Du für deine Grafik - und kennst Du die Blockelemente?

    Erst einmal solltest Du Dich um den Inhalt kümmern und die passenden Elemente
    für deinen Inhalt finden.

    Danach kannst Du die Elemente mit CSS nach deinen Vorstellungen formatieren.

    Gruß, Ich