[CSS]: Anfanggrafik(1x) -- Mittelgrafik(flexibel) -- Endgrafik(1x)

[Crizzo]

Hi,

das ist meine Seite: BlackHawk Zone

Nun seht ihr den Header (Orange) mit dem Schatten auf der rechten Seite.
Den Hintergrund vom Header hab ich mit:

background-image:url(../grafiken/schattenheader.gif);
background-repeat:repeat-y;

eingebunden.
Nun würde ich gerne, dass am Anfang (ganz oben) eine andere Grafik benutzt wird, als weiter unten.
Sprich es soll mit der "anfang.gif" los gehen und danach dann ganz normal mit der "schattenheader.gif" weitergehen.
Wie stell ich das am besten an? Ohne jetzt ein große Grafik zu erstellen, die alles beinhaltet.
Am Footer soll es dann genau umgekehrt sein.

Momentan hab ich es mit einem extra Div (beim Header) und einer großen Grafik im Footer geregelt, aber muss doch einfach gehen. Vor allem flexibler, ich will nicht bei jeder Änderung der Footerhöhe eine andere Grafik erstellen müssen.


CSS-Datei: http://www.blackhawk-zone.de/css/main.css
Gruß

 

[Keita]

Multiple Hintergrundbilder für ein Element gibt es erst mit CSS 3, aktuell unterstützt AFAIK nur Safari dieses Feature.

Beim Footer spielt doch die Höhe des Hintergrundbildes keine Rolle, sofern sie nicht geringer ausfällt als die des Footers, d.h. du kannst das Hintergrundbild hinreichend hoch gestalten und an der Unterkante fixieren.

greetings, Keita

 

[Crizzo]

das ist aber nicht so schön, also muss ich kleine Divs oben und unten drunter packen bzw. eine große Grafik und diese dann entsprechend fixieren.

Kennst du eine andere Methode den Schatten am rechten und unteren Rand anzubringen?
Jetzt habe ich eine eine Grafik von 840*1px genommen und so ist die Breite des Container sehr fixiert, d.h. ich kann nicht mit %-Werten für einen flexibles Design arbeiten, kann man den Schatten irgendwie anders anbringen? mit border-image oder sowas?

 

[Keita]

background-position erlaubt auch relative Werte und 100% bedeutet dabei nicht - wie man annehmen könnte - "positioniere den Hintergrund jenseits der rechten bzw. unteren Begrenzung des Elements", sondern "positioniere den Hintergrund bündig zur rechten bzw. unteren Begrenzung".
Das heißt, daß die Positionsangabe

background-position: 100% 100%;

den Hintergrund am rechten und unteren Rand des Elements,

background-position: 50px 100%;

den Hintergrund 50 Pixel vom linken Rand und unten bündig und

background-position: 100% 50px;

den Hintergrund am rechten Rand und 50 Pixel von der oberen Begrenzung positioniert.

Für eine Schatten am rechten Rand reicht es also aus, ein Bild mit ausschließlich dem Schatten zu erstellen, den Hintergrund wie gewünscht einzufärben und das Hintergrund an der rechten Elementbegrenzung zu fixieren:

div.main
{
  background-color: white;
  /* schattenheader.gif enthält nur den rechten Schatten */
  background-image: url(../grafiken/schatten.gif);
  background-position: 100% 0px;
  background-repeat: repeat-y;
}

Kniffliger wirds beim Footer, da er sich zwar horizontal wiederholt, in der rechten unteren Ecke jedoch die Überlappung beider Hintergründe hat und am rechten Rand den durchgehenden Schatten. Hier könntest du dich mit einem "Hilfs-DIV" aus der Affäre ziehen, der über die volle Breite geht und nur rechts unten ein Hintergrundbild mit der Ecke hat, innerhalb dieses DIVs wäre der Footer mit der unteren Kante, die sich horizontal wiederholt:

<div id="footer">
<div id="footerContent">
<!-- der Inhalt des Footers -->
</div>
</div>

#footer {
  width:840px;
  /* schattenecke.gif enthält nur das 7x7 kleine Quadrat mit der Überlappung */
  background-color: transparent;
  background-image: url(../grafiken/schattenecke.gif);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  position:relative;
  margin:0 auto;
}

#footerContent {
  height:34px;
  background-color: black;
  /* schattenunten.gif enthält nur den unteren Schatten */
  background-image: url(../grafiken/schattenunten.gif);
  background-position: 0px 100%;
  background-repeat: repeat-x;
  position:relative;
  text-align:center;
  color:#FFF;
  clear:both;
  /* 7px rechts, damit der rechte Schatten sowie 
     der Hintergrund von #footer nicht überdeckt werden */
  margin-right: 7px;
}

Ich hab den Code nicht getestet, aber das Prinzip wird hoffentlich klar: der rechte Schatten läuft von oben bis unten durch und wird unten vom Hintergrundbild von #footer überdeckt, der Footer selbst (der in #footerContent steckt) hat nur einen unteren Rand, der vor dem rechten Rand aufhört.

greetings, Keita