HILFE: Dynamisches Hintergrndbild und Textfeld in der Mitte

ElMillah

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

Bandit

Zitat von ElMillah

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]

ElMillah

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:

HTML

<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}


#hintergrund {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}


#content {
position: absolute;
left: 300px;
width: 1000px;
z-index: 2;
overflow: auto;
padding-bottom: 100%;
background: white;
}
</style>
</head>
<body>


<img id="hintergrund" src="holz2.jpg" border="0" alt="Hintergrundbild">
<div id="content">
         Inhalt......
</div>
</body>

Alles anzeigen

So schauts aus:

http://www.directupload.net/file/d/3750/yj39zksd_png.htm

Bandit

Code

#content {
width: 1000px;
margin: 0 auto;
z-index: 2;
overflow: auto;
background: white;
}

ElMillah

Vielen Dank, allerdings bekomme ich jetzt nur noch die Hintergrundgrafik angezeigt

Bandit

Link zur Seite?

ElMillah

Ist alles noch offline und überschaubar, ich habs mal gezipt und hochgeladen.

Link: HTM.rar

Bandit

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.

ElMillah

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"

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}


#hintergrund {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}


#content {
width: 1000px;
margin: 0 auto;
z-index: 2;
overflow: auto;
background: white;
}
</style>
</head>
<body>


<img id="hintergrund" src="holz2.jpg" border="0" alt="Hintergrundbild">
<div id="content">
         Inhalt......
</div>
</body>

Alles anzeigen

threadi

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.

Bandit

Zitat von threadi

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.

Doch, doch, das geht, siehe http://www.ohne-css.gehts-gar.net/0055.php

angeldbh

Versuchs doch einfach mal so

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<style type="text/css">html, body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
#hintergrund {width: 100%;height: 100%;position: relative;z-index: 1;}
#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>

ElMillah

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:

HTML

<html>
<head>


<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
background-image: url("holz2.jpg");
}


#content {
width: 1000px;
margin: 0 auto;
z-index: 2;
overflow: auto;
background: white;
}
</style>


</head>


<body>


<div id="content">


Inhalt.....


</div>
</body>

Alles anzeigen

Tags