CODEWITHSUNDEEP
html
James
James

Reputation: 1945

how to centre image over html table

I want to show image over html table and in centre. How to achieve this? This image is nothing but a progress bar. So this image will appear over html table while it is loading. I tried like this below but it is not coming over html table and in center of table. 

<div style="overflow: auto;height: 400px">
    <table id ="tbl"  style="width: 100%;background-image: url(img/busyIndicator.gif);background-repeat: no-repeat;background-position: center" >
        <colgroup>
            <col style="width: 30px"/>
            <col style="width: 10px"/>
            <col style="width: 1px" />
            <col style="width: 80px"/>
            <col/>
        </colgroup>
        <script id="Template" type="text/x-jquery-tmpl">
        <tr >
            <td>${Id}</td>
            <td>${Age}</td>
            <td></td>
            <td>${Name}</td>
        </tr>
        </script>

        <tbody id="List">
        </tbody>
    </table>
</div>

Hope it clarifies my question. Let me know if you need more info.

Update1

I have now added image on table instead of td but still not showing up

Update2 I am loading data into my jquery template via ajax call. Not sure if need to show my code for ajax call. So image should appear when data is loading and it should go off when its finished loading

Upvotes: 0

Views: 658

Answers (2)

Lucas Willems
Lucas Willems

Reputation: 7063

I think you just have to add :

  • position: relative to the table
  • background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0; to your td

So your code will be :

<div style="overflow: auto;height: 400px">
    <table id ="tbl" style="position: relative; width: 100%;" >
        <colgroup>
            <col style="width: 30px"/>
            <col style="width: 10px"/>
            <col style="width: 1px" />
            <col style="width: 80px"/>
            <col/>
        </colgroup>
        <script id="Template" type="text/x-jquery-tmpl">
        <tr >
            <td>${Id}</td>
            <td>${Age}</td>
            <td style="background-image: url(img/img1.gif); background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;"></td>
            <td>${Name}</td>
        </tr>
        </script>

        <tbody id="List">
        </tbody>
    </table>
</div>

Upvotes: 2

PaoloCargnin
PaoloCargnin

Reputation: 442

In the style property, just add:

background-position: center center;

So it beacame:

<td style="background-image: url(img/img1.gif); background-position: center center" ></td>

Read more here -> http://www.w3schools.com/cssref/pr_background-position.asp

Ps: In style attribute is better if you are synthetic, so you can write all in this way

background: url(img/img1.gif) center center;

Look here to learn how the "background" property work -> http://www.w3schools.com/css/css_background.asp

EDIT:

If you wantto put the loading img in a tag and position it in center of the td, you have to assign to the image this style:

style="display:table-cell;vertical-align:middle; margin:auto"

But, please, give a class on that image and write the style in a css file.

Upvotes: 2

Related Questions