How to set text over image?

Question

How can i add text over image ? I always get text bellow image? Is there any style so that title and descripton goes over image and not below?

  <div class="row">
        @foreach (var banner in Model.SportBanners)
        {

       <a href="@banner.LinkTo">
       <img id="resize" src="@banner.BannerPath" alt="" />
       <div class="@banner.ClassTag">

        </div>
        </a>
       <div class="image" style="">
        <h1>
        @MvcHtmlString.Create(Html.Encode(banner.Title).Replace("-", "<br />"))
     </h1>
      <br>
    <p> @MvcHtmlString.Create(Html.Encode(banner.Description).Replace("-", "<br />"))</p>
    <br>
    <br>
    </div>
    }
    </div>

Answer 1

You can use positioning.

Set the position: relative of the containing element.

Set the position: absolute of any internal element that you want to take control over beyond the default behaviour. Then top, right, bottom and left will allow you to position this element wherever you want in the containing div.

This will help you position things based on your HTML where img tags are used (allowing CMS driven alts etc.), rather than setting them as background images, which will require verbose classes or inline style tags.

Please see http://jsfiddle.net/5nryk3L6/2/ for a simplified version (removes the CMS backend stuff) of your code that achieves this. I've added a margin-left on the container to demonstrate how position absolute values are relative to the next element up the DOM tree with position relative set, as this can be quite confusing