Header soll sich Bildschirm anpassen

    Hallo,

    ich habe folgende Seite erstellt http://danielsfotos.com .
    Oben habe ich eine Navigation, darunter einen Header angelegt.
    Vorgestellt habe ich mir, dass der Header sich der Bildschirmbreit des Nutzers anpasst. Dazu sollen, wie auf dem Screenshot deutlich, Bilder (schwarz-weiß) dazu kommen, je breiter der Bildschirm des Nutzers ist.
    Wie würde sich das am besten realisieren lassen?

    MfG :)

    [Blockierte Grafik: http://billbos.eu/forumbilder/index_header.png]

    Ja, nimm ein Bildbearbeitungsprogramm und mach das Bild durch verschiedene "Operationen" X-Wiederholbar. Kopier dazu einfach den linken teil des bildes und schieb dann den rechten nach links. Füge dann den Linekn teil rechts ein und schau, dass man den übergang nicht sieht. Das kannst du danna bspecihern und in deine Seite so ainbinden:
    Ein Div, der absolut oder relativ, jenachdem was du willst, positioniert ist und 100% breite hat.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Ich möchte aber, dass es unterschiedliche, viele Bilder sind.
    Nehmen wir an ich gestalte so etwas wie ein Endlosbild mit einer Breit von 3500 Pixeln, was ja größer ist, als die meisten Monitore, muss ich dafür einen extra div anlegen oder wie kann ich das auf die gleiche Höhe vom Header bringen und das es nur rechts und links so verläuft und nicht etwa über den Header?

    Dann müsstest du ja einen übergang zum Header schaffen, das sähe dann... naja, bescheiden aus. Ja, ein Div wäre hier angebracht ;) In kombination mit body { overflow: hidden; }

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Hallo,

    also ich habe jetzt einen div angelegt

    Code
    /* HEADER BACKGROUND INFINITY */


div#headerwide {
    background: url(../images/header.png);
    height: 150px;
    width: 100%;
    overflow: hidden;
    }

    und dann in das html eingebittet oberhalb des header und unterhalb des header habe ich den div geschlossen!
    Irgendwie funktioniert das aber nicht so, wie ich es mir vorstelle.

    http://danielsfotos.com

    Dein div#headerwide steckt in div#container, und der ist 600px breit. Also?!?!

    Falls Du mit "strange" meinst, dass das Hintergrundbild sich nicht an die Größe des <div> anpasst - das ist logisch. Hintergrundbilder kann man (derzeit) nicht skalieren. Somit sind sie auch nicht in Höhe und Breite flexibel einsetzbar.

    Ähm, zu schnell auf "Antworten" geklickt:

    Ein div mit 100%, darin ein div mit 600px, dann 100% und dann wieder 600px. Wo ist dein Problem?

    Als erstes habe ich meine Navigation, welche in einem Container ist, mit einer festen Breite von 600 Pixeln. Hinter meinem Header soll und zwar auf kompletter Breite des Nutzer Bildschirms. Die Grafik ist 4500 Pixel breit, also breit genug für die meisten Bildschirme. Also wie bekomme ich Sie auf die Höhe des Header, dahinter?

    Zitat von Billbos

    Hinter meinem Header soll und zwar auf kompletter Breite des Nutzer Bildschirms.

    Der Satz ist irgendwie nicht komplett?

    Aber das Problem wurde schon von dem Unregistrierten genannt. Du hast innerhalb einer in einer breite begrenzten Box ein Element, welches auf 100% Breite gesetzt ist und welches deshalb auch nur die 100% = 600px annehmen kann.

    Was Du willst ließe sich theoretisch über ein Hintergrundbild des <body> lösen. Heißt: lass das <div>, welches Du derzeit an der Stelle für das Bild hast stehen, nimm dort aber das Hintergrundbild raus. Ergänze das Hintergrundbild im <body>, setze es mit background-position an die Position die es einnehmen soll (z.B. "background-position: center 110px;" wenn es einen Abstand von 110px nach oben haben und waagerecht zentriert werden soll). Aber auch hier gilt, was ich schon sagte: ein Hintergrundbild kann nicht skaliert werden.

    Dann ergänze zwischen body und dem wrapper noch ein Blockelement und gib diesem das Hintergrundbild.

    Code
    <body>
<div id="breiteshintergrundbild">
<div id="wrapper">..

    Ggfs. musst Du für dieses neue Blockelement auch die Höhe von 100% festlegen.

    Das Hintergrundbild in #breiteshintergrundbild kannst Du per background-position an die gewünschte Stelle bringen. Daher muss #breiteshintergrundbild auch hoch genug sein, also quasi den gesamten Content umschließen, aber auch breiter sein als dieser (100%).