CSS Bild im Hintergrund mit Div davor

[Timdaroxxa]

Hey,
folgendes Problem:

Ich habe ein Bild, welches nicht immer die selbe größe hat, da per CMS (Wordpress) festgelegt. Nun würde ich gerne die Überschrift in einem Kasten mit der Eigenschaft float: left;[/I (vertikal) zentrieren.
Das Bild aber muss immer die selbe Breite haben, die Höhe sollte sich von selbst anpassen, sodass das Bild nicht verzerrt ist.
Der Kasten hat eine festgelegte Breite und eine dynamische Höhe!


Weis jemand wie man das hinbekommt?

 

[IceMatrix]

Versteh ich nicht. Gibts n Beispiel?

 

[HaGGi.13]

So ganz verstehe ich auch nicht was du willst... mach mal mehr Ausführungen...

Aber ein Ansatz wären mehrere Div in einander. Damit meine ich einen Wrapper um die Grafik und die Schrift legen. Aber das kann natprlich auch völlig unsinnig sein, weil ich die Frage nicht ganz verstehe... ^^

Aber trotzdem mache ich das mal kurz was ich meine, aber nur exemplarisch:

<div>
	<div>schrift</div>
	<div>logo</div>
</div>

So könnte man dann den Wrapper centern genau so die beiden internen und je nach belieben styles festlegen.

 

[Phoebus Ryan]

ja ich peils auch nicht ganz. aber wenn du dem besagten image ne feste breite gibst (und zwar immer) passt sich die höhe automatisch an...

 

[Timdaroxxa]

ok sry,
hier nochmal verständlicher:

<div>
<div>schrift</div>
<div>logo</div>
</div>

Die Schrift soll über dem Logo liegen!
Aber, das Logo darf nur als <img /> eingebunden werden, da sich mit CSS background die Höhe nicht anpasst (oder doch???)

 

[Kokuswolf]

Bin mir auch nicht ganz sicher, ne Beispielgrafik aus Paint würde helfen. Hier aber ein paar Ideen...

Wenn die Schrift nur über dem Bild steht, nicht auf dem Bild (!), reicht vielleicht schon dies:

<div style="text-align:center;">
 Überschrift <br/>
 <img src=".." alt="" />
</div>

Wenn jedoch die Überschrift zentriert auf (!) dem Bild erscheinen soll und die Breite des Bildes bekannt ist, vielleicht so:

<div style="position:relative; display:block; width:123px;">
 <img src=".." alt="" />
 <div style="position:absolute; top:0px; left:0px; width:100%; text-align:center;">Überschrift</div>
</div>

???

 

[Baddii]

wenn der ansatz schon stimmt, dann hilft dir vill. das weiter: les dir die höhe des bildes per php aus und setz das dann einfach in die höhe des divs ein, somit haste keine höhenprobleme
vorrausgesetzt du hast die möglichkeit php zu nutzen, ansonsten weiß ich grad auch nicht weiter und wie schon erwähnt: mach mal ne skizze

 

[Timdaroxxa]

vielen Dank schonmal

@Kokuswolf: Die Variante zentriert aber doch nur horizontal?


Mit PhP is schomal ein guter Anfang, den Rest kann ich mir den selbst zusammenbauen^^ vielen Dank

 

[Kokuswolf]

Ich sagte bereits, das ich mir nicht sicher bin, was du meintest. Erkläre einfach deine Problematik mehr, wenn du bessere Antworten willst, dann versteht man dich auch richtig!

In dem Fall gibt es die Variante mit dem Style "background:url('../bla.jpg') no-repeat center center;", bzw. "left center" oder "right center", wenn das Bild immer kleiner als der Inhalt ist. Bzw. kannst du mit Baddii's Ansatz das Ergebnis erzwingen.

Nur mit dem Img-Element fällt mir auf die Schnelle nur ein Tabellenkonstrukt ein:

<table>
 <tr>
  <td>Überschrift</td>
  <td rowspan="2">Viel Text und bla bla...</td>
 </tr>
 <tr>
  <td valign="center" align="center"><img src=".." alt="" /></td>
 </tr>
</table>

Tabellen sind aber vermeindenswert. Ansonsten, keine Ahnung, was du genau möchtest...