I am attempting to set a background image for table cells that will be displayed on mobile phones. Since the image is quite large, I need to ensure it responds well to different screen sizes (iPhone, Android, etc). To achieve this, I have used the following CSS:
TABLE TR{
background-image: url("../images/bg.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 85px;
}
The table consists of two td elements: (I cannot alter these as they are essential for styling the information within the table cell)
TABLE .td1 {
text-align: left;
width: 80%;
padding-top: 0px;
padding-bottom: 33px;
}
TABLE .td2 {
text-align: left;
line-height: 14px;
width: 9%;
}
However, I am facing an issue where the background image breaks at td1 and repeats at td2:
My question is how can I adjust the CSS to ensure the entire TR cell has the background image without breaking at td1?
If you would like to view the fiddle code, you can access it using this link: HTML CODE