Hintergrundproblem...

[Grießdihan]

Hi, danke für die Zeit, die ihr euch nehmt:

Okay, ich möchte also gerne einen Hintergrund, ähnlich dem auf http://www.theportables.com/ machen. Diese Seite weist einen zweigeteilten Hintergrund auf: erstens sind da die waagrechten Graustreifen und zweitens der orange Übergang oben auf der Seite.
Der Code, (den ich in meine HTML-Seite eingebunden habe) lautet wie folgt:

<style type="text/css">
<!--
body {
 background-image: url(back_strip.gif);
}

/* centering container */
.wrapper {
 background:  url(back_orange.gif) repeat-x top;
}
-->
</style>

Die Querstreifen werden ausgegeben, der orange Hintergrund jedoch nicht. Welche Kaptialverbrechen muss ich begehen, um einen Hintergrund wie auf der genannten Website zu erhalten?
Danke für eure Hilfe!

[Felix Riesterer]

Liebe(r) Grießdihan,

was hat Dein Problem mit HTML zu tun? Dein Code ist CSS, nicht HTML!

Der Code, (den ich in meine HTML-Seite eingebunden habe) lautet wie folgt:

<style type="text/css">
<!--
body {
background-image: url(back_strip.gif);
}

/* centering container */
.wrapper {
background:  url(back_orange.gif) repeat-x top;
}
-->
</style>

Die Querstreifen werden ausgegeben, der orange Hintergrund jedoch nicht. Welche Kaptialverbrechen muss ich begehen, um einen Hintergrund wie auf der genannten Website zu erhalten?

Die genannte Website verwendet ein unmögliches Gemisch aus total veralteten HTML Anweisungen und CSS. BITTE NICHT NACHMACHEN!

Wenn bei Deiner Seite eine Hintergrundgrafik angezeigt wird, die andere aber nicht, dann könnte es sein, dass die Referenzierung fehlerhaft ist, zu deutsch: der Dateiname (und eventuell der Pfad) stimmen nicht mit der tatsächlichen Datei überein (oder sie existiert schlichtweg garnicht).

Eine zweite Möglichkeit wäre, dass das Element mit der Klasse "wrapper" (warum Klasse, warum nicht ID? Wird es mehrere Wrapper geben?) so wenig oder keinen Inhalt hat, dass seine Anzeigehöhe so klein ist, dass das Hintergrundbild nicht sichtbar wird.

Aber ohne Deine Seite gesehen zu haben bleibt das alles Spekulation.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Grießdihan]

"Aber ohne Deine Seite gesehen zu haben bleibt das alles Spekulation."

Danke an diejenigen, die versucht haben, mir zu helfen.

An alle anderen:
Vorschläge umreissen, statt klugzuscheissen.

Alles was ich wissen möchte, ist, wie der Hintergrund auf www.theportables.com/ gemacht wird. (keine Angst, werde das Layout NICHT ein zu ein kopieren...)

Wie funktioniert die Eindung des orangen Hintergrundteils?
Bin unwürdiger Anfänger, bitte daher um möglichst detailgenaue Antworten, danke!

[as]

Hi, Christian.

Eine zweite Möglichkeit wäre, dass das Element mit der Klasse "wrapper" (warum Klasse, warum nicht ID? Wird es mehrere Wrapper geben?) so wenig oder keinen Inhalt hat, dass seine Anzeigehöhe so klein ist, dass das Hintergrundbild nicht sichtbar wird.

Eine dritte Möglichkeit wäre, daß es auf Deiner Seite kein Element mit der Klasse "wrapper" gibt. Die CSS-Angabe

.wrapper {
 background:  url(back_orange.gif) repeat-x top;
}

bliebe dann wirkungslos, weil nichts da wäre, worauf sie wirken könnte. Verstehste?

Eine vierte Möglichkeit wäre, daß Du zwar alles richtig gemacht, aber Dich irgendwo vertippt hast.

"Aber ohne Deine Seite gesehen zu haben bleibt das alles Spekulation."

Wie funktioniert die Eindung des orangen Hintergrundteils?

Das hat man Dir mehrfach gesagt. Zeig doch mal, was Du bisher gemacht hast: den Quelltext Deiner Seite. Sonst kann man wirklich nur raten, warum das orangefarbene Hintergrundbild nicht erscheint.

Bin gespannt.

[Grießdihan]

Danke für die Stellungnahme. Ich würde ja gerne herzeigen, was ich schon habe. Aber bezüglich Hintergrund habe ich noch nichts. Habe den Teil mit dem Wrapper einfach aus dem Original-.css Sheet wiillkürlich kopiert (hoffe dass ich damit keine Urheberrechte verletze...)
Ich habe auch nicht den blassesten Schimmer, wie die Seite ihren Hintergrund generiert, mit meinem begrenzten Wissen blicke ich da einfach nicht durch... Der Code meines Hintergrunds lautet derzeit:

<style type="text/css">
<!--
body {
 background-image: url(back_strip.gif);
}
-->
</style>

(= horizontale Streifen, ORANGER Bereich fehlt)
Ich nehme an, dass über den normalen Hintergrund (Streifen) irgendwie der orange Hintergrund gelegt wird. Wie das bewerkstelligt wird weiss ich nicht. ERGO: - ICH BIN DANKBAR FÜR  J E D E N  FUNKTIONIERENDEN LÖSUNGSANSATZ!

Danke für deine Hilfe!

[as]

Hi, Christian.

Habe den Teil mit dem Wrapper einfach aus dem Original-.css Sheet wiillkürlich kopiert.

Das allein reicht nicht, denn

Eine dritte Möglichkeit wäre, daß es auf Deiner Seite kein Element mit der Klasse "wrapper" gibt.

Wie sieht der "HTML-Teil" deiner Seite aus? Was steht zwischen <body> und </body>?

Mit CSS ist es so, daß man mit jeder Angabe bestimmte HTML-Elemente gestaltet. In Deimem Fall willst Du sagen, welches Hintergrundbild sie haben.

En Detail (vielleicht solltest Du dein Browserfenster breiter machen):

body {                                       <- Browser, mach was mit <body>!
background-image: url(back_strip.gif); }     <- Das, was der Browser mit <body> machen soll: gib ihm das Hintergrundbild back_strip.gif!

.wrapper {                                   <- Browser, mach was mit den Elementen, die die Klasse "wrapper" haben, z.B. <div class="wrapper">!
background-image: url(back_orange.gif);      <- Gib ihnen das genannte Hintergrundbild!
background-repeat: repeat-x;                 <- Wiederhole das Bild in Horizontaler Richtung!
background-position: top; }                  <- Rücke das Bild ganz nach oben!

Der Browser versieht jetzt alle HTML-Elemente, die das Attribut class="wrapper" haben, mit dem referenzierten Hintergrundbild. Was aber, wenn es keine solchen Elemente gibt? "Nicht mein Problem", denkt der Browser, rendert den Rest der Seite und ruht sich erst mal aus.

In deiner Seite sollte also etwas wie <div class="wrapper"> stehen, damit der Browser wiß, wo das orangefarbene Bild hin soll.

War das das Problem? Wenn nicht: Rate mal, was jetzt hilfreich wäre...

Bis gleich.

[as]

Ich nehme an, dass über den normalen Hintergrund (Streifen) irgendwie der orange Hintergrund gelegt wird.

Haargenau, das orangefarbene Bild gehört zu einem anderen Element (im Beispliel <div class="wrapper">), das über dem Body liegt. Siehe https://forum.selfhtml.org/?t=124598&m=803028 und https://forum.selfhtml.org/?t=124598&m=803027.

[Felix Riesterer]

Grießdihan,

ich werde mir diesen Thread jetzt ausblenden, denn Du willst Dir offensichtlich nicht helfen lassen.

Viel Spaß noch,

Felix Riesterer.

[Ashura]

Hallo Grießdihan.

Okay, ich möchte also gerne einen Hintergrund, ähnlich dem auf http://www.theportables.com/ machen.

Das kommt mir doch sehr bekannt vor.

Einen schönen Dienstag noch.

Gruß, Ashura

[Felix Riesterer]

Liebe(r) Ashura,

den von Dir verlinkten Thread hatte ich schon ausgeblendet... Daher ist mir das nicht aufgefallen.

Schande über den OP, der die Charta nicht kennt!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[as]

Hi, Christian.

<style type="text/css">
<!--
body {
background-image: url(back_strip.gif);
}

/* centering container */
.wrapper {
background:  url(back_orange.gif) repeat-x top;
}
-->
</style>

Gib doch mal einen Link her, oder ein bischen HTML.

Am besten im unteren Thread, denn es kann sein, daß man diesen hier löscht.

Im vorletzten Satz von http://forum.de.selfhtml.org/hilfe/charta.htm#tipps-fuer-fragende versteckt sich schüchtern ein Hinweis für Dich.

Bis dann