CODEWITHSUNDEEP
htmlcss
JavaScripter
JavaScripter

Reputation: 4842

Background-image for table

I am trying to apply a background image for table cells which display on mobile phone. As the image is in a large size, so I need to make it responsive for different screen sizes ( iphone, android, etc). So I used CSS like following:

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 has two td: ( I can't change those two td, as they are used for styling info in 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%;
}

Then, it looks like, background img just break at td1 and re-peat at td2:

My questions is how to adjust the css and make the whole TR cell have the background image without break at td1?

enter image description here

below is fiddle code, I don't know how to upload image to there. this is just the structure of my HTML code: HTML CODE

Upvotes: 0

Views: 186

Answers (1)

Phlume
Phlume

Reputation: 3131

Do you have to use Tables (is it an HTML email?) or can you just use a div layout? If you must use the TABLE then try altering the CSS in the code to look like this:

tr {display: block;}
td {display: inline-block; background: transparent;}

Upvotes: 1

Related Questions