CODEWITHSUNDEEP
htmlcss
Evhenii Vasylenko
Evhenii Vasylenko

Reputation: 39

Background img out of box bounds

I have following table and css, in this case the image fills table cell.

But how can I make the image have its full size and is out of cell bounds?

.bg-player-tank {
  background-image: url(https://wxpcdn.gcdn.co/dcont/tankopedia/germany/G54_E-50.png);
  background-size: contain;
  background-repeat: no-repeat;
}

td {
  width: 100px;
  height: 100px;
  border:1px solid;
}
<table>
  <tr>
    <td class="bg-player-tank"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>

</table>

I'm trying to make a game. The whole gamefield i've done as 26*26 table. The problem is, that the tank must take 4 cells instead of 4. But i don't have idea, how to do it. So i thought, that it possible, that image takes only 1 cell, but browser renders it as "4-cell". All other cells filled with background-img of css. sample

Upvotes: 0

Views: 65

Answers (2)

Temani Afif
Temani Afif

Reputation: 273427

An idea is to use a pseudo element and rely on overflow:

td {
 padding:25px;
 border:1px solid;
}

.bg-player-tank {
  position:relative;
}
.bg-player-tank:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:-68px;
  bottom:-62px;
  background-image: url("https://wxpcdn.gcdn.co/dcont/tankopedia/germany/G54_E-50.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index:-1

}
<table>
  <tr>
    <td class="bg-player-tank"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 3

wastedyears1981
wastedyears1981

Reputation: 13

You may need to place the class in the <table> tag. It appears to me the background image will need to be in the parent tag rather than in the table data section. Hope that makes sense.

Upvotes: 0

Related Questions