Gif über das Header-Bild legen

birger

Hallo,
ich versuche über mein header-Bild im Orginaltheme ein fast komplett tranzperentes Bild (gif) zu legen.
Ich habe dazu #headerimup erstellt.
Meine Problem ist nur, wie binde ich es so ein, dass es über #headerimg liegt???

Danke im Voraus für eure Hilfe!!!
mfg Birger

header.php :

PHP

#header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg     { margin: -1px 9px 0; height: 192px; width: 740px; }
         #headerimgup     { margin: -1px 9px 0; height: 192px; width: 740px; }


/*     To ease the insertion of a personal header image, I have done it in such a way,
    that you simply drop in an image called 'personalheader.jpg' into your /images/
    directory. Dimensions should be at least 760px x 200px. Anything above that will
    get cropped off of the image. */


        #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat bottom;}


        #headerimgup { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/banup.jpg') no-repeat top; }

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

so

headerbild verlinken

dort wo Du es hingeschrieben hast, wird es wieder als *hinter* grundbild erkannt, Du magst ja , dass es ein *Vorder*grundbild wird -also *drüberliegt*

lg

birger

Hallo,
danke für die schnelle Antwort.
Leider habe ich aber nicht ganz verstanden....
ich habe also die Reinfolge von #headerimg und #herderimgup vertauscht.
Aber es wird keine Änderung erreicht.
Ich sehe immer nur #headerimg. Wenn ich es auskommentiere bleibt der Header weiß.
danke für die Hilfe im Voraus!
die Url für den Blog ist ****!!!
sl Birger

Monika

Code

<body>
<div id="page">




<div id="header">
	<div id="headerimg">




<div id="headerup">
	<div id="headerimgup">
	</div>


</div>

Alles anzeigen

da gehört das rein, was im Link steht, nicht dort wo die Hintergrundbilder verlinkt sind.

lg

birger

hi, das hatte ich auch schon mal probiert...
Dann kommt leider das Ergebnis: ***
lg

smille

Hallo,

sende doch mal deine URL und welches transparente Bild soll in den Vordergrund?

(Als PN)

birger

Moin!

Ich verstehe leider nicht ganz, warum immer das ganze layout durcheinander gerät, wenn ich #headerimgup in <div methode ensetze.....

lg

smille

Hallo,
CSS-Problem.

Das bottom steht für unten auf der Seite (wird übrigens nur vom IE richtig ausgewertet. Firefox und Netscape zeigen die Seite falsch richtig an (hatte erst Probleme das nachtzvollziehen).

#headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat bottom;}
#headerimgup { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/banup.jpg') no-repeat top; }

Tausche bottom gegen top aus, Wenn banup dann nicht im Vordergrund kannst Du noch einen Z-Index einfügen (bestimmt die Lage von hinten aus gezählt), ich weiß aber nicht ob Z-index bei Hintergrundbildern zulässig ist.

Andernfalls könntest Du die Grafike auch frei platzieren (wenn'S nicht geht schreib ne PN)..

Sollte also so aussehen:
#headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat [COLOR=DarkGreen]top;[/COLOR]}
#headerimgup { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/banup.jpg') no-repeat [COLOR=Black]top;[/COLOR][COLOR=DarkRed][COLOR=Black] [/COLOR]z-index:3;[/COLOR] }

Das rote nur ausprobieren, wenn Du das Bild nicht siehst!

birger

Vielen Tausend Dank,
hat super geklappt......
versuche mich nun daran, das bild zu verlinken.....
lg

smille

Hallo,

wird nicht funktionieren, da es ein Hintergrundbild ist.

Mit

Sollte es gehen. Aber Achtung, das position:absolute; kann die ganze Formatierung zerschlagen. Am Besten ganz am Ende kurz vor dem abschließenden </body>-Tag eingeben.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Gif über das Header-Bild legen

Jetzt mitmachen!