Question

Here is the code:

<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
    <tr>
        <td>
            <div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
        </td>
    </tr>
</tbody>
</table>

Now, I am i need to increase the width of the image OR need to left-indent the image.

How can I do that ?

I have tried giving the width directly.. But it’s not working…

Any advice or suggestion will be thankful and grateful..

Answer 1

You are using image as background of the parent div. If you want to just change the size of image you should use img tag. Something like the example below

    <table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
    <tr>
        <td>
            <div >
                <img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&amp;d=identicon&amp;r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
        </td>
    </tr>
</tbody>
</table>​​​​​​​​​​​​​​​