Hintergrundbild relativ positionieren

[RoughNex]

hallo leute

also ich bin neu hier und brauche dringend eure hilfe. ;)

ich sitze an einem kleinen projekt, welches dieses schema besitzt:


die gesamte seite besteht aus einer seite (keine frames !!)
in den schmalen bereichen aussen herum befinden sich bereits bilddateien.
nun möchte ich rechts unten in dem strichlierten bereich noch eine grafik einfügen, welche immer rechts unten ist.

dies müsste doch irgendwie möglich sein, indem man einen abstand von unten her gibt, also abhängig von der länge der website
oder irgendwie an die untere grafik anbinden, da diese ja immer ganz unten ist.

dass hauptproblem ist: die seite ist je nach inhalt immer unterschiedlich lang. wie bekommt man es nun hin, dass das bild trotzdem immer genau rechts unten oberhalb der unteren grafik ist ??

komme einfach nicht mehr weiter und auch onkel google konnte nach 2 tagen vergeblichen suchens nicht mehr weiterhelfen.

hoffe ihr versteht mich und mein problem und könnt mir weiterhelfen.

danke bereits im voraus

 

[Wustersoss]

Du musst das Element positionieren.
Entweder mit position:absolute oder position:relative, dies hängt von deinem Elternelement ab.
Zur Verdeutlichung hier noch 2 Eklärseiten:
position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Wie man in CSS mit Position arbeitet - Professor Web - Das Webdesigner Portal & Blog

Wenn du das nicht hinbekommst, muss du noch deinen Code posten und mitteilen ob das Element mitscrollen soll oder nicht.

 

[RoughNex]

Danke. Hat mir wirklich sehr geholfen. wie bereits erwähnt wurde: wie kann ich dieses nun auch mitscrollen?

Das bild sollte ja immer rechts unten direkt über der anderen grafik sein. egal wie lange die seite ist. Hierbei handelt es sich um keine frames. also es ist eine datei und alles wird gescrollt. :-)

 

[devilseye]

hast du dir die links genau angeschaut???? scheint nicht so.
denn mit diesen links solltest du selber auf die lösung kommen.

 

[RoughNex]

trotz genauem schauens und genauer leserei und experimenten funktioniert es nicht wie gewünscht. das bild mittels "position: absolute" zu positionieren klappt gut, danke,
aber es wird immer vom browserfenster ausgehend positioniert. nicht vom ende der website, wie es gewünscht ist.

mein css schaut zur zeit so aus:
#watermark_img {
background-repeat: no-repeat;
background-image: url('images/watermark.jpg');
position:absolute;
bottom: 40px;
right: 0px;
}


hoffe ihr könnt mir weiterhelfen

 

[Wustersoss]

Du musst den ganzen HTML-Code posten inklusive der CSS-Datei.

 

[RoughNex]

in der html steht nur folgendes, das relevant hierfür ist:

<!-- #EndEditable --></div>
<div id="watermark">
<div id="watermark_img">
</div>
</div>
<div id="footer">
<div id="collage2">
<div id="copyright" style="width: 212px">
xxxxxx xxxxx xxxxx xxxx xxxx (text)</div>
<div id="telephone">
Telefon: 01234 - 1234567 | E-Mail: [email protected]</div>
<div id="watermark_img"></div>
</div>
</div>


und in der css das:

#watermark {
position:relative;
}
#watermark_img {
background-repeat: no-repeat;
background-image: url('images/watermark.jpg');
position:absolute;
bottom: 40px;
right: 0px;
}

#footer {
margin-top: 42px;
background-image:url('images/red_bg2.gif');
background-position: left top;
background-repeat: repeat-x;
}


dies sind alle relevanten parts. kann man mit dem noch nichts anfangen ?
oder kann man das watermark irgendwie abhängig von dem footer machen?

 

[Wustersoss]

Ich denke das reicht als Code aus.

Warum verwendest du für alles Div-Kästen, es gibt noch andere Elemente ausser Div.

<div id="watermark">
        <div id="watermark_img">

das ist doppelt, ein div reicht aus. Aber für deine Zwecke kannst du das komplett löschen.


Probier mal folgendes:


Statt:

<div id="footer">
    <div id="collage2">
        <div id="copyright" style="width: 212px">
            xxxxxx xxxxx xxxxx xxxx xxxx (text)</div>
        <div id="telephone">
            Telefon: 01234 - 1234567  |  E-Mail: [email protected]</div>
        <div id="watermark_img"></div>
    </div>
</div>

(diese vielen Divs sind gar nicht nötig, nimm doch mal das p-Element und es gibt da über 100 Elemente zur Auswahl)

machst du:

<div id="footer">
<img src="http://www.html.de/images/watermark.jpg" alt="">
    <div id="collage2">
        <div id="copyright" style="width: 212px">
            xxxxxx xxxxx xxxxx xxxx xxxx (text)</div>
        <div id="telephone">
            Telefon: 01234 - 1234567  |  E-Mail: [email protected]</div>
        <div id="watermark_img"></div>
</div>
</div>

ins CSS schreibst du:
#footer img {float:right;}

Aus dem CSS kannst du
#watermark {
position:relative;
}
#watermark_img {
background-repeat: no-repeat;
background-image: url('images/watermark.jpg');
position:absolute;
bottom: 40px;
right: 0px;
}
raus löschen.

 

[RoughNex]

fast perfekt. danke. hat bestens geklappt.
nun stellt sich mir noch die frage:
ich habe meinen footer und mein bild mittels relative und z-index passend positioniert. leider entsteht unterhalb des footers jetzt noch eine weise fläche, welche so hoch ist, wie das bild. kann man die noch irgendwie entfernen ?

 

[Wustersoss]

Alles nebulös, kompletter Blindflug. Du hast im Footer einen Abstand drin mit margin-top. Hat das was damit zu tun?

Ohne die Seite zu sehen und ohne kompletten Code ist das fast nicht machbar vernünftige Antworten zu geben, falls du weisst was ich meine.
Teste es aus.