Bulletproof fortlaufender Header im Hintergrund

Fiona · Post by **Fiona** » Sun Oct 21, 2007 1:58 pm

Hallo

ich möchte hier www.das-echte-fotoalbum.de rechts und link des Banners einen farbige Hintergrundkachel fortführen.

In der CSS steht:

#serendipity_banner {
margin: 0;
height: 249px;
background: url('img/blue_header.jpg') repeat-x center left ;
border: 0px;

Die Datei blue_header.jpg ist angelegt. Zu sehen ist jedoch nur eine weiße Fläche.

Habe ich einen Denkfehler gemacht oder was muss ich tun?

Herzlichst
Fiona

Cohnina · Post by **Cohnina** » Sun Oct 21, 2007 2:12 pm

Es könnte daran liegen, dass für ein Element zwei Hintergründe angegeben sind - ich hab das auch noch nie hinbekommen und daher mein eines Bild per img tag in der normalen index.tpl angegeben (direkt unter <div id="serendipity_banner">) und das fortlaufende Hintergrundbild als Hintergrund in der CSS Datei.

Fiona · Post by **Fiona** » Sun Oct 21, 2007 2:25 pm

Cohnina wrote:Es könnte daran liegen, dass für ein Element zwei Hintergründe angegeben sind - ich hab das auch noch nie hinbekommen und daher mein eines Bild per img tag in der normalen index.tpl angegeben (direkt unter <div id="serendipity_banner">) und das fortlaufende Hintergrundbild als Hintergrund in der CSS Datei.

Das klingt gut, könntest du das für mich Dummie ggf. noch konkretisieren. In der index finde ich diesen Code:

Code: Select all

<div id="serendipity_banner">
    <h1><span class="{if $template_option.firbtitle == 'false'}in{/if}visible"><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></span></h1>
    <h2><span class="{if $template_option.firbdescr == 'false'}in{/if}visible"><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></span></h2>
</div>
<div id="serendipity_below_banner"></div>

wie und wo kommt jetzt mein img/blue_header.jpg als fortlaufendes Muster rein?

Herzlichst
Fiona

Cohnina · Post by **Cohnina** » Sun Oct 21, 2007 2:40 pm

Das fortlaufende ist bei mir in der CSS definiert:

#serendipity_banner {
margin: 0;
height: 249pxpx;
background: #ffffff url('http://www....blue_header.jpg') repeat-x center left ;
border: 0px;
}

und der Banner kommt dann in die index.tpl von bulletproof:

<div id="serendipity_banner">
<div aling="center"><img src="http://www....-hoch2.jpg" alt="Willkommen!" /></div>
<div id="title">

Möglich, dass es eine elegantere Methode gibt, aber CSS ist auch noch etwas Neuland für mich

Fiona · Post by **Fiona** » Sun Oct 21, 2007 2:55 pm

Ne, das war's bei mir leider nicht.

Der Hintergrund blieb rechts und links weiß.

Trotzdem Danke für deine Hilfe.

Hat jemand noch einen Tipp?

Herzlichst
Fiona

Cohnina · Post by **Cohnina** » Sun Oct 21, 2007 3:04 pm

Letzter Tipp: Probier's mal mit der ganzen Adresse zum Bild

Fiona · Post by **Fiona** » Sun Oct 21, 2007 4:15 pm

Cohnina wrote:Letzter Tipp: Probier's mal mit der ganzen Adresse zum Bild

Ganz anders. Ein paar Threads vorher hatte jemand schon einmal das Problem gelöst.

Ich bin schon ein gutes Stück weiter. Nur der weiße Streifen neben dem Header bekomme ich nicht weg.

http://www.das-echte-fotoalbum.de

Vorschläge?

Herzlichst
Fiona

Post by **yellowled** » Sun Oct 21, 2007 10:33 pm

Fiona wrote:Ich bin schon ein gutes Stück weiter. Nur der weiße Streifen neben dem Header bekomme ich nicht weg.

Möglicherweise liegt's an meiner Brille

- aber ich sehe da ums Verrecken keinen weißen Streifen neben dem Header? Was ich sehe, und zwar in Firefox 2.0.0.6/Linux, ist, dass die Hintergrundgrafik, die den über die gesamte Seitenbreite gehenden Header simuliert, scheinbar 1-2 Pixel zu niedrig ist.

Wie auch immer - kann es sein, dass der besagte weiße Streifen ein reines IE-Problem ist? (Ich habe leider gerade keinen IE zur Hand.)

YL

Fiona · Post by **Fiona** » Mon Oct 22, 2007 8:33 am

yellowled wrote:
Fiona wrote:Ich bin schon ein gutes Stück weiter. Nur der weiße Streifen neben dem Header bekomme ich nicht weg.
Möglicherweise liegt's an meiner Brille - aber ich sehe da ums Verrecken keinen weißen Streifen neben dem Header? Was ich sehe, und zwar in Firefox 2.0.0.6/Linux, ist, dass die Hintergrundgrafik, die den über die gesamte Seitenbreite gehenden Header simuliert, scheinbar 1-2 Pixel zu niedrig ist.

Wie auch immer - kann es sein, dass der besagte weiße Streifen ein reines IE-Problem ist? (Ich habe leider gerade keinen IE zur Hand.)

YL

Ja, es hat mir auch keine Ruhe gelassen. Ich habe den weißen Hintergrund tatsächlich weg bekomme. Und zwar dadurch:

Code: Select all

body {background-color: #fff; background: #fff url('img/blue_header.jpg') repeat-x;
}


#wrapper {
   width: 85%;
   font-family:  verdana, arial, helvetica, sans-serif;
   font-size: 69%;
   background: #fff url('img/blue_header.jpg') repeat-x;
   background-color: #225888;
   border-left: 0px solid #fff;
   border-right: 0px solid #fff;
  
    margin: 0px auto;
}

Wobei ich mir nicht sicher bin, ob background-color: #225888;
im wrapper tatsächlich notwendig ist. Jedenfalls musste ich die Option "Gleich lange Spalten über Javascript erzeugen" auswählen, sonst wäre der blaue Hintergrund weiter unten auf der Seite wieder aufgetaucht.

Danke fürs Nachsehen.

Herzlichst
Fion[/code]