DIV Hintergrundbild am unteren rand ausrichten

Intermediate

Sunday, April 10th 2011, 12:21am

DIV Hintergrundbild am unteren rand ausrichten

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

Professional

Posts: 370

Sunday, April 10th 2011, 1:36am

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:

HTML Code

<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>

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

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

This post has been edited 4 times, last edit by "Snowflake" (Apr 10th 2011, 2:00am)

einheitswurzel

Intermediate

Posts: 52

Monday, April 11th 2011, 12:24pm

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

Intermediate

Posts: 197

Monday, April 11th 2011, 12:42pm

	Cascading Style Sheets
1 2	background-position: left bottom; background-repeat: repeat-x;

so?

Szabo

Professional

Posts: 248

Monday, April 11th 2011, 3:17pm

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.