• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbilder kombinieren

A

a_goldie

Neues Mitglied
Hallo,

vorneweg: die Thematik ist in meinen Augen ziemlich kompliziert und ich hoffe, dass ich sie richtig rüberbringen kann. Man möge mir das mit Paint erstellte Veranschaulichungsbild verzeihen ;-).

3323263659_7de2834d50.jpg


Ganz im Hintergrund, nennen wir es Ebene 1, befindet sich ein Bild (definiert im body Tag). Im Bild ist es rosa dargestellt, allerdings soll es auf der Webseite nicht einfarbig sein, sondern ein richtiges jpg.

Im Vordergrund, nennen wir es Ebene 2, soll ein Text angezeigt werden. Dieser Text soll ein Hintergrundbild bekommen, das Ebene 1 überlagert. Realisieren möchte ich das per "table" oder per "div".

Nun kommt mein Problem: Das Hintergrundbild in Ebene 2 soll oben ein Bild sein (hier der Baum und die Sonne). Wenn nun aber der Text so lang wird, dass er unten weiter geht, so soll sich nicht das Baum+Sonne Bild wiederholen. Stattdessen soll solange ein Streifen (nicht einfarbig, sondern als jpg, im Bild dunkelgrün dargestellt und 4x wiederholt) wiederholt werden, bis der Text abgeschlossen ist.

Folgende Variante würde das Problem lösen, wenn man statt des sich wiederholenden jpgs eine feste Farbe definiert:

<td style="background: #FFFF00 url(bild1.jpg) no-repeat;">

Schreibt man in dieses Tabellenfeld einen langen Text, so wird, sobald bild1.jpg zu Ende ist, unten die Farbe "wiederholt".

Hat jemand die Lösung für mein Problem, wenn sich statt der Farbe, eine weitere jpg Datei wiederholen soll?

(Ich hoffe, ich habs nicht zu konfus beschrieben. Wenn ja, bin ich natürlich für Fragen offen)

Viele Grüße,
Anne
 
Versuch's mal so:

Weise das Hintergrundbild von Ebene 1 (rosa) nicht dem body, sondern html zu.
Das von Ebene 2 weise dem body zu und sorge dafür, dass es sich mit
Code: 
background-repeat: no-repeat;
nicht wiederholt.

Das dritte Bild weise mit repeat einem Div zu, der einen margin-top hat, welcher der Höhe vom Hintergrundbild aus Ebene 2 entspricht.

Vom Prinzip her ist das hier erläutert.
 
Hallo,

habe es auf die beschriebene Weise versucht, allerdings treten schon Probleme auf, wenn ich die Hintergrundbilder für <html> und <body> vergebe.

Folgenden html-Code verwende ich:

Code: 
<html style="background-image:url(plane1.jpg); background-position: top center;">
<head>
....
</head>
 
<body style="background-image:url(plane2.png); background-position: top center; background-repeat:no-repeat;">
</body>
</html>

Das Problem: es wird nur plane2.png angezeigt, plane1.jpg wird weiß dargestellt. Woran kann das liegen?

Ausgeschlossene Fehlerursachen:
- Pfadangabe zu plane1.jpg stimmt, denn lasse ich den body style weg, so wird plane1.jpg korrekt angezeigt
- Am png Format liegt es nicht, bei einem jpg verhält es sich genauso

Vielleicht liegt es am Browser? Verwende den IE7.

Gruß, Anne
 
Für html darfst du die Style-Angabe nicht auf diese Weise zuordnen, sondern musst sie entweder innerhalb des head-Bereichs mit
Code: 
<style type="text/css">

html {
background-image:url(plane1.jpg);
background-position: top center;
}

</style>

einbinden oder in eine externe CSS-Datei auslagern.
Am Anfang muss also <html> stehen.
CSS-Styleangaben einbinden
 
Das Resultat war leider das gleiche :(.

Aber ich hab nochmal ein bisschen rumprobiert, ganz ohne Bilder, sondern erstmal nur mit div-Tags. Jetzt habe ich endlich ein Ergebnis erzielt, auf das ich hoffe aufbauen zu können:

Code: 
<html>
<head>
<title>Div Test</title>
</head>
<!--rot-->
<body style="text-align: center;background-color:#CC0000;width: 980px;height: 400px;">
         <!--grau-->
         <div style="position: relative; top:50px; left:0px; width:200px; height=50px;background:#CCCCCC;text-align:left">
         </div>
         <!--grün-->
         <div style="position: relative; top:50px; left:0px; width:200px; height=5px;background:#00FF00;text-align:left;">
                 <!--blau-->
                 <div style="position: relative; top:-20px; left:100px; width:50px; height=0px;background:#0000FF;">
                 test<br>
                 von<br>
                 Ümbrüchen<br>
                 die<br>
                 die<br>
                 height<br>
                 des div-Elements<br>
                 übersteigen<br>
                 </div>
         </div>
</body>
</html>

Jetzt versuche ich noch, die Hintergrundbilder anstelle der Farben zu verwenden und bin gespannt, was passiert.

Natürlich meld ich mich nochmal, obs geklappt hat...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben