Hintergrundbild positionieren mit Wiederholung
Flo
- design/layout
Hallo!
Bin gerade am Erstellen unserer Vereinswebsite und habe da ein kleines Problem.
Ich habe 3 Hintergrundbilder, die ich einfügen möchte. Das ganze soll dann einen Pergamentbogen ergeben, bei dem oben am Anfang des Dokumentes das erste Bild steht, die Mitte sich immer wieder wiederholt, solange halt auch das Dokument ist und am Ende soll dann der untere Teil des Pergamentbogens zu sehen sein. Grafisch habe ich alles schon als*.gif erstellt.
Ich habe es einfach mal mit folgendem Quellcode versucht:
<body>
<style type="text/css">
{
background-image:url(hintergrundgrafiken/pergament_o.gif);
background-repeat:no-repeat; background-position:top;
background-color:white; height:140px; width:750px;}
{
background-image:url(hintergrundgrafiken/pergament_m.gif);
background-repeat:repeat-y; background-position:top;
background-color:white; height:304px; width:750px;}
{
background-image:url(hintergrundgrafiken/pergament_u.gif);
background-repeat:no-repeat; background-position:bottom;
background-color:white; height:307px; width:750px;}
</style>
</body>
Zu meinem Leidwesen hat das so nicht funktioniert. Ich hab eine Css Quelldatei gefunden, die mehrere Hintergrundbilder positioniert, allerdings hat die bei mir auch nicht funktioniert. Obwohl sie im Head Bereich eingebunden war! (Ja, den Quellpfad hab ich auch überprüft, und die Bilderchen waren auch existent)
Ok, vielleicht kann mir jemand helfen. Ich weiß dass es gehen muss, nur nicht wie! *ggg*
Hi,
Ich habe es einfach mal mit folgendem Quellcode versucht:
<body>
<style type="text/css">
Ein Style-Element hat im Body nichts zu suchen.
{
background-image:url(hintergrundgrafiken/pergament_o.gif);
background-repeat:no-repeat; background-position:top;
background-color:white; height:140px; width:750px;}
Eine CSS-Regel erfordert a) einen Selektor, und b) die Eigenschaft-Wert-Angaben.
Der Selektor fehlt bei dir voellig.
Zu meinem Leidwesen hat das so nicht funktioniert.
Natuerlich nicht, wenn du mit irgendeiner Phantasie-Syntax herumprobierst.
Ok, vielleicht kann mir jemand helfen. Ich weiß dass es gehen muss, nur nicht wie! *ggg*
Beschaeftige dich mit den *Grundlagen* von CSS.
Hier geht's lang: http://de.selfhtml.org/css/
MfG ChrisB
Danke für die Antwort,
war allerdings weniger hilfreich!
Mit dieser Antwort ist mein Problem immer noch nicht behoben, aber wenn sich jemand dann etwas toller fühlen kann, war es ja auch was wert.
Also:
Wie müsste dann der Quellcode aussehen, damit es funktioniert?
Ich versuche ja schon da durchzusteigen, allerdings ist das ganze kompliziert und ich habe leider nicht die Zeit mir erst mal ALLE Basics reinzuziehen. Deshalb muss ich leider immer nur die Sachen lernen, die ich ja auch verwenden will. im großen und ganzen funktioniert des auch, allerdings hab ich halt Probleme mit dem Hintergrundbild.
Vielleicht hat ja doch noch jemand Lust mir da etwas konkreter helfen zu wollen oder auch zu können.
Danke schon mal im Voraus!
Hi,
Mit dieser Antwort ist mein Problem immer noch nicht behoben,
Natuerlich nicht, dass habe ich auch nicht erwartet.
Wenn du allerdings erwartet hast, hier die fertige Loesung auf dem Silbertablett serviert zu bekommen, ohne selbst auch nur irgendwas machen zu muessen - dann lagst du leider falsch.
Also:
Wie müsste dann der Quellcode aussehen, damit es funktioniert?
Es muesste zu aller erst mal syntaktisch korrektes CSS sein.
Ich versuche ja schon da durchzusteigen, allerdings ist das ganze kompliziert und ich habe leider nicht die Zeit mir erst mal ALLE Basics reinzuziehen. Deshalb muss ich leider immer nur die Sachen lernen, die ich ja auch verwenden will.
Gut, dann mach das - lerne das, was du gerade brauchst.
Das sind unter anderem die *Grundlagen* von CSS, denn ohne die zu kennen, kannst du CSS nicht anwenden.
im großen und ganzen funktioniert des auch, allerdings hab ich halt Probleme mit dem Hintergrundbild.
Nein, wenn der gezeigte Code wirklich der ist, den du verwendet hast, dann ist das Problem von den speziellen Hintergrund-Eigenschaften unabhaengig.
Damit haettest du nicht mal bspw. einen Text farbig formatieren koennen, weil nicht mal die CSS-Synatx gestimmt hat.
MfG ChrisB
Ah, ein Klug...!
Danke für deine Hilfe, doch auf sowas kann ich auch verzichten.
Ich hab die Grundlagen durchgelesen, allerdings habe ich es nicht sofort kapiert. Dachte dass dafür ein Forum da ist. Um die Sachen fragen zu können, die man net kapiert hat.
Würde mich also freuen wenn diejenigen die meine Frage nicht beantworten wollen oder können dies einfach nicht tun. Einen "Setz dich hin und lern erst mal, bevor ich mich dazu abgebe dir irgendwas zu sagen" Kommentar finde ich nicht gerade hilfreich). *grmbl*
Ok, vielleicht hat jemand eine Hilfemöglichkeit. Ich brauch NICHT den Quellcode für mich perfekt ausgearbeitet, würde mir schon helfen wenn mir jemand sagen kann wie er das bei sich gemacht hat!
Danke
Hi,
Ah, ein Klug...!
Wo?
Danke für deine Hilfe, doch auf sowas kann ich auch verzichten.
Da bin ich mir gar nicht so sicher.
Ich hab die Grundlagen durchgelesen, allerdings habe ich es nicht sofort kapiert. Dachte dass dafür ein Forum da ist. Um die Sachen fragen zu können, die man net kapiert hat.
Wenn du nicht kapierst, wie man *grundsaetzlich* Elemente mit CSS formatiert - dann frag' halt einfach danach.
Dann beschreibe aber bitte auch detailiert, *was* du in der Einfuehrung ins Thema in SELFHTML nicht verstanden hast.
*Solange* du das aber noch nicht kapiert hast, stelle dann bitte auch keine "weiterfuehrenden" Fragen - wie hier bspw. die Hintergrundbild-spezifische.
Denn so lange du das allgemeine noch nicht verstanden hast, koennten dir eng auf Spezifisches zugeschnittene Hinweise auch nur sehr begrenzt bis gar nicht weiterhelfen.
Würde mich also freuen wenn diejenigen die meine Frage nicht beantworten wollen oder können dies einfach nicht tun.
Wenn du die dir angebotene Form von Hilfe nicht willst - dann ist dir nicht zu helfen.
Einen "Setz dich hin und lern erst mal, bevor ich mich dazu abgebe dir irgendwas zu sagen" Kommentar finde ich nicht gerade hilfreich). *grmbl*
Dass du noch nicht in der Lage bist, den Hilfs- und Informationsgehalt mancher Antworten zu verstehen, macht momentan nichts.
Ok, vielleicht hat jemand eine Hilfemöglichkeit. Ich brauch NICHT den Quellcode für mich perfekt ausgearbeitet, würde mir schon helfen wenn mir jemand sagen kann wie er das bei sich gemacht hat!
OK - ich habe mich mit den Grundlagen von CSS beschaeftigt, und mir dann angesehen, welche Eigenschaft speziell fuer Hintergruende zustaendig ist.
Dann hab ich dieses erworbene Wissen angewendet, und voila, hatte ich ein Hintergrundbild auf meiner ersten Testseite.
MfG ChrisB
Ok, anscheinend liegt hier auch ein Verständigungsproblem vor.
1. Ich weiß wie man ein Hintergrundbild in eine Website einbindet.
2. Ich weiß wie ich ein Hintergrundbild mit Wiederholungen einbinden kann.
Ich weiß allerdings nicht, wie ich es schreiben kann dass:
1. Das obere Bild immer oben ist (ok, das schon, aber nicht in Kombination mit)
2. Das zweite Bild direkt an das erste Bild anschließt, sich aber sooft wiederholt wie auch der geschriebene Inhalt der HP ist und
3. das letzte Bild am Ende eingefügt wird.
Es soll ein Pergament vom Layout sein, das halt immer so lange ist wie die Seite auch ist. Das das irgendwie geht weiß ich, aber nicht wie.
Kann ich das mit CSS erreichen, oder muss das eine PHP Datei sein (So eine hab ich gefunden, konnte damit allerdings noch net wirklich was anfangen). Wenn es mit CSS geht, sind das dann einfach nur einfachachere CSS Befehle die ich einfach jedem Bild zuteile oder wie!?!
Danke
Hallo Flo
Das obere Bild immer oben ist (ok, das schon, aber nicht in Kombination mit)
Das zweite Bild direkt an das erste Bild anschließt, sich aber sooft wiederholt wie auch der geschriebene Inhalt der HP ist und
das letzte Bild am Ende eingefügt wird.
Du denkst in Tabellen, bei denen hast du ein Raster, dass du mit Inhalten (auch Bildern) und/oder Hintergrundbildern füllst.
Wie du das umsetzen kannst, hat dir Gunnar schon geschrieben.
Nehmen wir an, dein HTML sieht in etwa folgendermaßen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="content">
Hier der ganze Seiteninhalt
</div>
</body>
</html>
Dann könnte das CSS dazu so aussehen:
html, body {
margin:0;
padding:0;
}
html {
background:url(hintergrundgrafiken/pergament_m.gif) repeat top;
height:100%;
}
body {
background:url(hintergrundgrafiken/pergament_u.gif) repeat-x bottom;
min-height:100%;
}
* html body {
height:100%;
}
#content {
background:url(hintergrundgrafiken/pergament_o.gif) repeat-x top;
}
Wenn dir das nicht hilft, dass du es selbst für deine Seite umsetzen kannst, dann wäre es hilfreich, uns einen Link auf die Seite zu geben, damit wir dir direkt helfen können.
Der Quelltextschnipsel deines Ausgangspostings kann nicht wirklich von der Seite stammen, wenn du die Grundlagen kennst.
Auf Wiederlesen
Detlef
@@Flo:
Ich habe 3 Hintergrundbilder, die ich einfügen möchte.
Jedes HTML-Element kann in CSS 2.1 maximal 1 Hintergrundbild haben.
Für 3 verschiedene Hintergrundbilder brauchst du also 3 verschiedene HTML-Elemente. 'html' und 'body' bieten sich dafür an; 'head' eigentlich auch, aber IEs sind zu blöd dafür, IIRC.
Welches Element sich bei dir noch anbietet, lässt sich ohne Kenntnis deines HTML-Quelltextes natürlich nicht sagen.
Ich habe es einfach mal mit folgendem Quellcode versucht:
2 Stunden ausprobieren können Ihnen 10 Minuten Handbuchlesen sparen. [Linda]
Ich weiß dass es gehen muss, nur nicht wie! *ggg*
Was gibt’s da zu grinsen? Wenn, dann wäre das Grinsen doch auf der Seite der Wissenden. VBG.
Live long and prosper,
Gunnar