How to put Text over the Image in Sitecore?

Question

I need to create user control where <sc:text/> element should showed over the <sc:image>.

I know this can be achieved via CSS but in this case control cannot be configured as we cannot override inline styles.

Any hints?

Answer 1

You can achieve this using the sc:fld extension function and wrapping sc:text in markup, adding class names or ids (or inline styles if you must!).

<img src="{sc:fld( 'graphic', $sc_currentitem, 'src’ )}" class="head" />
<span class="txt"><sc:text field="txtField" /></span>

You can then style these as normal

img.head {}
span.txt {}

Answer 2

I don't understand the problem. This seems like more of a front-end problem than a Sitecore issue. CSS will work fine. Here's a rough example (not tested but gets you the idea):

Sample HTML:

<div class="my-container">
  <div class="img">
    <sc:image Field="Bar" runat="server" />
  </div>
  <div class="txt">
    <sc:text Field="Foo" runat="server" />
  </div>
</div>

Sample CSS:

.my-container {
  position: relative;
}

  .my-container .txt {
    position: absolute;
    z-index: 50;
    top: 0px;
  }

  .my-container .img {
    z-index: 10;
  }