In einer View ein Bild als Background-Image ausgeben
Eingetragen von wrestler (216)am 14.02.2013 - 19:48 Uhr in
Hallo
Ich möchte in einer View das Bild-Feld als Hintergrundbild (backgroundimage) ausgeben, so dass ich die anderen Felder (Text, Body usw.) darüber positioniern kann.
Gibt es eine Lösung, ausser mit CSS? Denn da habe ich das Problem, dass ich mit dem responsiven Omega-Theme arbeite und absolutes Positionieren nicht funktioniert.
Danke im Voraus!
- Anmelden oder Registrieren um Kommentare zu schreiben
Dem Elternelement einfach per
am 14.02.2013 - 20:25 Uhr
Dem Elternelement einfach per CSS relativ positionieren und das Element was das Hintergrundbild enthält auf absolute stellen.
Das funktioniert immer, egal welches Theme du benutzt.
Mal davon ab, dass auch im
am 14.02.2013 - 20:27 Uhr
Mal davon ab, dass auch im repsonsive Design absolute Positionierung möglich ist, wobei das da auf die umschließenden Elemente ankommt und zugegeben oft tricky ist, könntest du einen Umweg gehen. Dazu müsstest du dir ein eigenes Template für den View anlegen, wofür man die nötigen Infos unter "Information" in der View-Bearbeitung findet.
Dort könntest du dann hergehen und die Felder aus deinem View einzeln ausgehen. Nur mal als Beispiel - Du erstellst ein Template, z.B. views-view-fields--meinviewmaschinenname.tpl.php, und in diesem, was ja quasi der Inhalt der Schleife eines Views ist, gibst du dann die Felder aus:
<div style="background-image:url(<?php print $fields['bild-url']->content; ?>)";><?php print $fields['feld_1']->content; ?>
<?php print $fields['feld_2']->content; ?>
</div>
Gibt bestimmt noch andere Wege die nach Rom führen, aber so würde ich es machen. :)
Das funktioniert wirklich
am 14.02.2013 - 21:43 Uhr
Das funktioniert wirklich bestens, vielen Dank! (Hab mal den für mich einfacheren Lösungsweg gewählt).
Das einzige Problem ist nun nur noch, dass sich das Elternelement bei breitem Bildschirm schön dem Bild anpasst, wenn ich das Fenster aber schmaler schiebe, bleibt das Bild zwar schön im Verhältnis, die Höhe das Elternelements bleibt jedoch gleich hoch. Das ist wohl reine CSS-Sache, oder? Wenn ja, villeicht ein Tip?