Question

I want to create a div which contains an image and text on it. Something similar to http://wearyoubelong.com/ How do I go about doing this? I am using Zerb Foundation Framework. As of now I have tried using position : absolute on the text, but that seems to break at a lot of places. Can you please advice me on how to go about this?

Answer 1

Let say you have a sample HTML like this

HTML

<div id="container">
<div id="content">
    <h1>Here goes some content</h1>
    <p>Description about the product.
    Some more desription about the product.</p>
</div>
</div>​

CSS

#container
{
    background-image:url('http://image.made-in-china.com/2f0j00cZjaqNvWlEks/Men-T-Shirt.jpg');
    background-repeat:no-repeat;
    height:400px;
    width:400px;
}

#content
{
    position:absolute;
    height:auto;
    width:auto;
    top:150px;
    left:100px;
}
#content h1
{
   color:Yellow;
   font-weight:bold;
   font-size:22px;
}

#content p
{
    color:Red;
}

Just gave the main div #container a background-image , positioned div #content to absolute and then using top and left property float it according to your needs.

Live Demo

Hope this helps.

Edited to set #container div’s height and width to auto

Updated Demo
​