DIV Hintergrundbild am unteren rand ausrichten

einheitswurzel · 10. April 2011, 00:21

Hallo,

ich habe einen div mit fester breite aber variabler höhe je nach text. ich möchte aber ein 100px hohes hintergrundmuster (1px breit, halt vertikal wiederholt) nur am unteren rand des DIVs ausgerichtet anzeigen. ist das möglich? wie am einfachsten?

Grüße,

EHW

Snowflake · 10. April 2011, 01:36

Hey, schau mal hier

Der Trick in dem Fall ist das css Argument "position". Der einzige Fehler, des "Lösungsersteller" er hat ein </div> beim #bottom_div vergessen.

Edit://
Okay mit dem Beispiel zickt wer wohl rum? Genau der Mist von MS.

Deswegen hier mal ein kleines Beispiel:

Quellcode

<style type="text/css">
#container {
position:relative;
border:solid 1px #000;
width:200px;
min-height:200px;
height:auto !important;
height:200px;
color:#000;
}
#bottom_div{
height:100px;
width:100%;
background-image: url(xyz.jpg);
position:absolute;
left:0px;
bottom:0px;
}
</style>
<div id="container">Test
<div id="bottom_div"></div>
</div>

Alles anzeigen

Allerdings, das ist jetzt die Frage. Soll der Bottom Div "beschreibbar" sein oder soll der unter dem Text wandern? So wie meine Lösung jetzt ist geht der Text, wenn er lang genug ist in das Hintergrundbild mit hinein.

Andere Möglichkeit wäre, jenachdem wie das Design das ganze erlaubt (keine Abgerundetete Ecken oder ähnliches) einfach ein Div unter das Div zu setzen. Sprich

Quellcode

<div id="container">Test blabla</div>
</div id="bottom">Ich stehe direkt unter dem Text</div>

einheitswurzel · 11. April 2011, 12:24

Ich fürchte das ist nicht ganz was ich suche. Das bild soll ja hinter den text. Aber dank für die Anregung, das werde ich mir schon umbauen.

vg

EHW

Florian · 11. April 2011, 12:42

Quellcode

background-position: left bottom;
background-repeat: repeat-x;

so?

Szabo · 11. April 2011, 15:17

Wenn du willst, dass Hintergrundbild sich auf der x-Achse widerholt, dann musst du brackground-repeat: repeat-x; machen ansonsten kommt da statt repeat-x; ein no-repeat; hin.

Florian · 11. April 2011, 15:32

einheitswurzel schrieb:

(1px breit, halt vertikal wiederholt)

Ziemlich eindeutig, oder?

DIV Hintergrundbild am unteren rand ausrichten

DIV Hintergrundbild am unteren rand ausrichten

Quellcode

Quellcode

Quellcode

einheitswurzel schrieb:

Teilen

Benutzer online 2

Tags