CODEWITHSUNDEEP
htmlcss
Hokage
Hokage

Reputation: 23

HTML/CSS Table in front of image

I'm trying to get this table in front of this image and it just doesn't happen, I know the table isn't that good its just an example!

HTML

<section>
  <div class="image-wrapper">
    <img src="img/animesea.png" alt="animeb-image" class="picimage">    
    <table>
      <tr>
        <td>a</td>
      </tr>
    </table>
  </div>
</section>

Thanks

Upvotes: 0

Views: 3501

Answers (3)

SOuřaan Gřg
SOuřaan Gřg

Reputation: 399

Check it out.You will get some idea.

  <!DOCTYPE>
    <html>
    <style>
.image-wrapper 
      { 
        width:650px;
        height:488px;
        background: url("http://stuffpoint.com/sea-and-beach/image/56782-sea-and-beach-anime-sea-pic.jpg") no-repeat;
        background-size:contain; 
        padding:5px; 
        margin:auto;
      }
table 
  {
    width:650px;
    height:150px;
    border:2px solid yellow;
    color:white;
    background-color:rgba(0,0,0,0.5);
    text-align:center;
    padding:2px;
  }
th  
  {
    border:1px solid yellow;
    color:white;
    font-size:20px;
  }
td
 {
    border:1px solid yellow;
    color:white;
 }
   </style>
      <body>
      <section>
          <div class="image-wrapper">
            <table>
                <th colspan='3'>Person name and age</th>
                      <tr>
                        <td>First name</td>
                        <td>Last name</td> 
                        <td>Age</td>
                      </tr>
                      <tr>
                        <td>Eve</td>
                        <td>Jackson</td> 
                        <td>54</td>
                      </tr>
                      <tr>
                          <td>John</td>
                          <td>smith</td> 
                          <td>74</td>
                      </tr>
            </table>
          </div>
     </section>
    </body>
   </html>

Upvotes: 0

nelek
nelek

Reputation: 4312

You can use css style so background image will be adjusted all the time with table size.

There is code :

.tableBckImg
{
    background:url(http://www.placehold.it/300x300);
    background-repeat:no-repeat;
    background-size:100% 100%;
}
<table cellspacing="0" cellpadding="0" border="0" class="tableBckImg">
    <tr>
      <td width="50" align="center">1</td>
      <td width="50" align="center">2</td>
      <td width="50" align="center">3</td>
    </tr>
    <tr>
      <td width="50" align="center">4</td>
      <td width="50" align="center">5</td>
      <td width="50" align="center">6</td>
    </tr>
    </table>

You can change number of rows and columns and see how background image expand or shrink, here, in fiddle example

In this example, background image is 300x300 px.

Upvotes: 1

Miss.Vy
Miss.Vy

Reputation: 176

I would place the image as a background-image like @SVK suggested. Here is another option. Wrap the img tag and the table tag in separate divs and apply position: absolute on both. jsFiddle

You could also use z-index and positioning. jsFiddle. It's not clear exactly what you want to achieve, but based on what you've asked I would apply the image as a background like @SVK said.

Upvotes: 1

Related Questions