irgendwie verzweifele ich daran 2 Bilder hintereinander in den Header zu legen.
Mein bisheriges Vorgehen:
das Hintergrundbild als Farbverlauf (PHP-Datei zur Berechnung) blende ich über einen benutzerdefinierten Tag ein.
Das davor liegende Bild möchte ich gerne über den H1-Tag einblenden.
Ergebnis: Den Farbverlauf kann ich einblenden; das Vordergrundbild (transparentes PNG) bekomme ich auch hin.
Aber: Wie bekomme ich beides übereinander?
Hier die Quellcodes:
TPL:
Code: Select all
<div id="header">
{verlaufhorizontal}
<h1>
{cms_selflink dir="start" text="Haus der Jugend in Königeswinter e.V."}
</h1>
<hr class="accessibility" />
</div>Code: Select all
div#header {
height: 110px; /* adjust according your image size */
/* background: #d2c3fc; */
background: white;
}
div#header h1 a {
/* you can set your own image here */
font-size: 21px; /* font size for h1 */
line-height: 24px;
background: url(images/logo_koewi_trans) no-repeat 0%;
display: block;
height: 110px; /* adjust according your image size */
padding: 0% 0 0 0%;
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would ha
Code: Select all
$h="960px"; //Höhe des Farbverlaufes in Pixel
//Startfarbe im RGB Format
$r1 = 247; //R
$g1 = 249; //G
$b1 = 204; //B
//Endfarbe im RGB Format
$r2 = 52; //R
$g2 = 103; //G
$b2 = 204; //B
$s = array($r1,$g1,$b1);
$e = array($r2,$g2,$b2);
for ($i = 0; $i<$h; $i++) {
$c1 = max(0,$s[0]-((($e[0]-$s[0])/-$h)*$i));
$c2 = max(0,$s[1]-((($e[1]-$s[1])/-$h)*$i));
$c3 = max(0,$s[2]-((($e[2]-$s[2])/-$h)*$i));
// vertikal echo "<div style=\"clear:left; font-size:0px; top:".$i."px; left:0px; height:1px; width:600px; border:0px; background-color:rgb(".round($c1,0 ).", ".round($c2, 0).", ".round($c3,0 ).");\"></div>\n";
echo "<div style=\"z-index:99; float:left; font-size:0px; height:100%; width:1px; border:0px; background-color:rgb(".round($c1,0 ).", ".round($c2, 0).", ".round($c3,0 ).");\"></div>\n";
}
Viele Grüße
Thorsten
