HILFE: Dynamisches Hintergrndbild und Textfeld in der Mitte

  • Hallo,


    ich bräuchte Hilfe bei einem kleinen HTML-Projekt. Und zwar geht es darum, dass das Hintergrundbild sich immer an die Bildschirmgröße anpassen sollte. Und in der Mitte sollte immer eine weiße Fläche sein (Breite 1000px, weil ich auf diese Breite alles andere ausrichte)auf der ich dann die Homepage gestalten möchte. In der Höhe sollten beide Flächen jeweils dem Inhalt angepasst sein, also nur so Hoch wie auch Inhalt auf der Seite ist. Heißt bei 16:9 sieht man links und rechts mehr vom Hintergrund und bei 4:3 halt weniger.


    Ich habe hiermal einen Entwurf gemacht, damit ihr euch das besser vorstellen könnt.


    [Blockierte Grafik: http://s7.directupload.net/images/140919/temp/en5j3m37.jpg]


    Es wäre nett wenn mir jemand den nötigen HTML-Code geben würde, sodann ich direkt mit dem Inhalt anfangen kann ;)


  • Es wäre nett wenn mir jemand den nötigen HTML-Code geben würde, sodann ich direkt mit dem Inhalt anfangen kann ;)


    Das kannst du vergessen. In Foren gibt es Hilfe zur Selbsthilfe, aber extrem selten fertigen Quellcode.


    Siehe
    http://www.ohne-css.gehts-gar.net/0055.php
    http://www.ohne-css.gehts-gar.net/0001.php


    - - - Aktualisiert - - -


    Auszug aus den Forenregeln:


    Zitat

    Inhalt von Beiträgen:
    [FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
    Verboten oder auch unerwünscht sind folgende Inhalte:
    [/FONT]

    • [FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen[/FONT]
  • Vielen Dank, bin schon ein gutes Stück weiter. Allerdings stellen sich mir noch 2 Probleme in den Weg.


    1. mein #content bekomme ich nicht automatisch auf meine Bildschrimgröße zentriert. Mit position:relative; zentriert sich #content auf die Originalgröße des Hintergrundbildes ist also garnicht mehr zu finden auf dem Bildschirm :/


    2. Kann ich die Seite nach unten nicht scrollen, also der Inhalt wird einfach abgeschnitten am Ende der Seite.


    Mein Code sieht jetzt wiefolgt aus (hier habe ich #content einen absoluten Abstand zum linken Rand gegeben):


    CSS:



    So schauts aus:


    [Blockierte Grafik: http://s14.directupload.net/images/140919/temp/yj39zksd.png]

  • Nicht nur ich werde die Datei nicht downloaden, entpacken und dann nach Fehlern suchen. Wenn du noch keinen Webspace hast, tut es zur Not auch ein Freehoster.

  • Alles Klar ;) Vielen Dank, für den Tipp, hatte an Freehoster gar nicht gedacht.



    - - - Aktualisiert - - -


    Ich bekomme selbst nur die Grafik angezeigt, hier der Quellcode der "Startseite"


  • Du sprichst von Hintergrundbild und bindest es als normales Bild ein? Dadurch verdrängst Du jeglichen anderen Content der Seite und siehst - logischerweise - nur noch das Bild.


    Wenn Du ein "bildschirmfüllendes" Hintergrundbild erreichen willst, dann verwende die CSS-Eigenschaften background-image und background-size.

  • Versuchs doch einfach mal so


    HTML
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
    2. <style type="text/css">html, body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
    3. #hintergrund {width: 100%;height: 100%;position: relative;z-index: 1;}
    4. #content {width: 1000px;margin: 0 auto;z-index: 2;overflow: auto;background: white;}body { background-image: url(holz2.jpg); background-attachment:fixed; background-position:top; background-size:cover;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div id="content"> Inhalt......</div></body>
  • Perfekt, Danke!!! Jetzt scheint alles so zu sein wie ichs wollte :) Dann werd ich mal weitermachen mit dem Rest und bei Fragen mich wieder melden. Thread kann dann geschlossen werden.


    Hier der fertige Code: