Problem mit breitenangepasstem Bild

[pudem]

Hallo,

ich habe ein Problem, bei dem ich trotz intensiver Recherche und Rumprobiererei nicht weiterkomme.

Zunächst wird ein Bild eingeblendet, das als Hintergrundbild fungiert. Es enthält eine Figur mit einer Sprechblase. In diese Sprechblase soll nun ein Text eingeblendet werden.

Das klappt soweit ganz gut, nur soll die Seite für Smartphones optimiert sein, sodass bei kleinerer Breite des Displays die Breite der Hintergrundgrafik automatisch an das Display angepasst werden soll. Das geht auch. Das Problem ist, dass die Position des Textes sich nicht mit anpasst.

Ich habe mal zwei Versionen erstellt und zum angucken hochgeladen:

www.redensarten-index/test/test.html

<div style='margin-left:auto;margin-right:auto;background:url(schredder-mobil.jpg) no-repeat; background-size:100% auto; postion:relative;max-width:450px;height:655px;border: 1px solid black;'>

<p style='margin-left:auto;margin-right:auto;font-size:1.4em;text-align:center;vertical-align:middle;top:8%;position:relative;'>Dies ist der Inhalt der Blase</p>

</div>

Hier wird das Bild als echte Hintergrundgrafik angezeigt. Wenn man nun den Broser verkleinert (also kleiner als die Breite der Grafik = 450 px), dann wird das Problem deutlich: Beim Verkleinern rutscht der Text nach unten, weil der Abstand von oben nicht angepasst wird

Eine zweite Datei enthält das bild als "echtes" Bild und wird über z-index in die unterste Ebene geschoben, sodass der Text sichtbar wird.

http://www.redensarten-index.de/test/test2.html

<div style='margin-left:auto;margin-right:auto;display:block; z-index:1; postion:relative;max-width:450px;border: 1px solid black;'>
<img style='max-width:100%;height: auto;' src="schredder-mobil.jpg" alt="" title="">

<p style='margin-left:auto;margin-right:auto;font-size:1.4em;text-align:center;vertical-align:middle;top:-600px;position:relative;z-index:3;width:450px;'>Dies ist der Inhalt der Blase</p>

</div>

Hier rutscht der Text nach oben weg, weil der Abstand von unten nicht angepasst wird.

Kann ich das irgendwie machen, dass der Text immer in der Sprechblase bleibt, egal, wie breit der Bildschirm ist? Ich weiß nicht, ob das mit CSS-Hausmitteln überhaupt geht.

 

[dazzle89]

Ich habe dir mal die Lösung gebastelt:

p benötigt:

box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
display: block;
font-size: 1.4em;
max-width: 450px;
padding: 0 20px;
position: absolute;
text-align: center;
top: 20px;
width: 100%;
z-index: 3;

div benötigt:

border: 1px solid black;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 450px;
position: relative;
width: 100%;
z-index: 1;