CODEWITHSUNDEEP
htmlcss
kojirosan
kojirosan

Reputation: 507

How To Add Static Image to Table

I want to show a static image top-right side of my table. When i try to add css code like this it fails:

<style>
    .hoverTable{background:url(../../Images/taxi.jpg) top right no-repeat;
            background-attachment:fixed; }
</style>

But this works:

<style>
    body {background:url(../../Images/taxi.jpg) top right no-repeat;
            background-attachment:fixed; }
</style>

My table is something like this:

 <table class="hoverTable">

            @for (int i = 0; i < Model.Questions.Count; i++)
            {
                <tr>
                    <td>
                        @Model.Question[i]
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.Answers[i].Answer, new { @style = "width:20px; margin-left:10px; margin-bottom:10px; text-align:center;" })

                    </td>

                </tr>
            }
        </table>

So how can i add a picture like image which shown as below?

enter image description here

Upvotes: 0

Views: 78

Answers (3)

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

try this 

 .hoverTable{
    background:url(../../Images/taxi.jpg) top right no-repeat;
    background-attachment:fixed;
    background-size: 100% 100%;
    width:100%;
  }

Upvotes: 0

Aayushi Jain
Aayushi Jain

Reputation: 2879

You can use <img> tag in <td> where you want the image.

Check here: https://jsfiddle.net/604139j5/1/

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Apply width:100% for your table.

 .hoverTable{
    background:url(../../Images/taxi.jpg) top right no-repeat;
    background-attachment:fixed; 
    width:100%;
  }

DEMO

Upvotes: 2

Related Questions