Bild mittig auf Fensterseite zentrieren

  • Hallo zusammen,


    ich suche jetzt schon tagelang nach einer Lösung für mein Problem - wahrscheinlich ist es ganz einfach.

    Ich komme einfach nicht drauf....


    Ich möchte für den Kopf- und Fußbereich einer Seite jeweils ein Bild verwenden,

    das über die komplette Fensterbreite geht - also 100% (ohne Rand).

    Weil ich das Bild bereits breiter als nötig hinterlege (2000px), damit auch bei größeren Bildschirmen kein Rand bleibt,

    soll der sichtbare Bildausschnitt immer gleich angezeigt werden.

    D.h. wenn man das Fenster verkleinert oder vergrößert, wird das Bild lediglich links und rechts angeschnitten bzw. mehr gezeigt.

    Die Höhe des Bildes soll immer gleich bleiben, kann also fest angegeben werden.


    Der eigentliche Inhalt zwischen Kopf- und Fußbereich soll auch zentriert sein und wäre z.B. 1200px breit


    Wie kann ich das mit css lösen?


    Lieben Dank vorab

  • Wow...perfekt! Das ging ja super fix, vielenDank!


    Funktioniert das auch, wenn der Content oben und unten optisch verbunden ist?

    (siehe Beispiel anbei)


    Ich würde gerne den Menübereich links farblich hinterlegen.

    Der Menüinhalt müsste dann natürlich an dieser Stelle bleiben

    und sich nicht bei größerem oder kleinerem Fenster verschieben.


    1000Dank

  • Ich habe das jetzt mal versucht - Kopf- und Fußbereich funtkionieren so super.

    Nur mit dem Inhalt habe ich noch Schwierigkeiten.


    Das Bild im Inhalt-Hintergrund soll sich je nach Inhaltmenge vertikal wiederholen.

    Daher habe ich es auf repeat-y - eine feste Höhe gibt es hier ja auch nicht.

    Nur wird das Bild gar nicht angezeigt....irgendetwas passt noch nicht (siehe anbei)

    Komischerweise wird der Text auch nicht zentriert.


    Hier der Code:


    CSS:


    HTML, BODY { margin:0; padding:0; width:100%; }

    HEADER, INHALT, FOOTER { text-align:center; }


    HEADER {

    height: 168px;

    background:url(../bilder/banner2.png) center center no-repeat;

    }


    INHALT {

    background:url(../bilder/content.png) center center repeat-y;

    }


    FOOTER {

    height:133px;

    background:url(../bilder/footer2.png) center center no-repeat;

    }



    HTML:


    <header>Header</header>

    <inhalt>Inhalt</inhalt>

    <footer>Footer</footer>

  • Du bekommst eine Antwort und knapp 3 Minuten später schreibst du

    ...ich steh auf dem Schlauch...?

    Mit anderen Worten, du hast dich NULL bemüht, mit der Antwort auch nur ansatzweise etwas anzufangen.


    Genau das ist der Grund, warum mir Foren immer weniger Spaß machen, da Eigeninitiative immer weniger angesagt ist

  • Du bekommst eine Antwort und knapp 3 Minuten später schreibst du

    Mit anderen Worten, du hast dich NULL bemüht, mit der Antwort auch nur ansatzweise etwas anzufangen.


    Genau das ist der Grund, warum mir Foren immer weniger Spaß machen, da Eigeninitiative immer weniger angesagt ist

    Damit meinte ich, dass ich den Befehl überhaupt nicht kenne.

    Ich habe zwar danach gegoogelt, bin aber anscheinend noch nicht so schlau

  • Ich habe zwar danach gegoogelt, bin aber anscheinend noch nicht so schlau

    Wenn du noch nicht so schlau bist, dann solltest du nicht nach 3 Minuten schon aufgeben, denn in 3 Minuten kannst du unmöglich viel gelesen und ausprobiert haben. Nur "Nr. 5" hätte 1.790.000 Treffer von google in der Zeit lesen können.

  • Hi m.scatello (und auch die anderen Experten hier),


    ich kann andschob77 ziemlich gut verstehen und bitte einfach mal in seinem Namen um Nachsicht.


    Folgende Situation:

    Man ist seit Stunden an einem Problem dran und kriegt den Sch.. nicht hin und die Scripte werden immer unübersichtlicher.

    Auf Nachfrage hier schmeißen die Experten einen "Ein-Satz Hinweis" ins Forum.


    Ich will hier betonen, dass diese Hinweise grundsätzlich richtig sind (ist mir schon so oft passiert)!! Aber wenn man noch nie in der Materie drin war; - Reaktion siehe oben, da auch Google Deine 1.790.000 Treffer ausgibt, die einem nur noch mehr Fragen ins Hirn scheißt.


    Ich erinnere Dich nur an Deinen Kommentar im PHP Bereich mit Deinem "Ein-Satz-Hinweis", der mir in den ersten 5 Minuten die Zornesröte ins Gesicht geschossen hat; - um dann in den nächsten 30 Minuten zu erkennen; - Hey, Du hattest Recht, aber halt ein bischen verquer!


    Bitte gehe uns "Greenhorns" nicht verloren! Es sind schon andere wegen anderen Sachen hier raus.


    Just my 5 cents.

  • olkostbe

    Ich hätte das alles auch nicht geschrieben, wenn da nicht gerade mal 3 Minuten dazwischen gelegen hätten. Man kann ja davon ausgehen, dass er nicht 2 Sekunden nach Schreiben der Antwort diese auch gelesen hat. Rechnen wir mal 1 Minute später, dann verbleiben 2 Minuten, um sich mit dem Begriff zu beschäftigen. Sorry, das ist gerade bei Anfänger ein Witz und zeugt eindeutig davon, dass Eigeninitiative gleich Null ist und man sich lieber alles vorkauen lässt. Und dafür sind meiner Meinung nach Foren nicht da.

  • Ich sehe das genau so. Es fehlt häufig gerade bei Einsteigern ein gesundes Maß an Eigeninitiative.

    Was ich aber noch viel schlimmer finde ist, dass man dann wie m.scatello nicht darauf hinweisen darf ohne dann wieder "Bitte habt Verständnis"-Beiträge zu erhalten. Ihr dürft alle nicht vergessen, dass das Netz voll von Dokumentationen/Tutorials ist. Zugegeben, viele davon sind auch fehlerhaft oder einfach veraltet. Aber wenn jemand fragt, ob ein Tutorial etwas taugt, hilft man ja gerne das zu beantworten. Aber die Grundlagen beizubringen ist in einen Forum, in dem die Helfer auf freiwilliger Basis ihre Freizeit opfern, um Hilfe zur Selbsthilfe zu geben, kaum sinnvoll.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!