<td class="style1" align='center' height='35'>
<div style='overflow: hidden; width: 230px;'>
<a class='link' herf='' onclick='topic(<?=$key;?>)'>
<span id='name<?=$key;?>'><?=$name;?></span>
</a>
</div>
</td>
This is my CSS script
.style1 {
background-image: url('http://localhost/msite/images/12.PNG');
background-repeat: no-repeat;
background-position: left center;
}
I want to stretch the background-image
all over the <td>
cell
This question is related to
html
css
background
I think what you are looking for is
.style1 {
background: url('http://localhost/msite/images/12.PNG');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
.style1 {
...
background-size: 100%;
}
You can specify just width or height with:
background-size: 100% 50%;
Which will stretch it 100% of the width and 50% of the height.
Browser support: http://caniuse.com/#feat=background-img-opts
You can't stretch a background image (until CSS 3).
You would have to use absolute positioning, so that you can put an image tag inside the cell and stretch it to cover the entire cell, then put the content on top of the image.
table {_x000D_
width: 230px;_x000D_
}_x000D_
_x000D_
.style1 {_x000D_
text-align: center;_x000D_
height: 35px;_x000D_
}_x000D_
_x000D_
.bg {_x000D_
position: relative;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.bg img {_x000D_
display: block;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.bg .linkcontainer {_x000D_
position: absolute;_x000D_
left: 0;_x000D_
top: 0;_x000D_
overflow: hidden;_x000D_
width: 100%;_x000D_
}
_x000D_
<table cellpadding="0" cellspacing="0" border="10">_x000D_
<tr>_x000D_
<td class="style1">_x000D_
<div class="bg">_x000D_
<img src="http://placekitten.com/20/20" alt="" />_x000D_
<div class="linkcontainer">_x000D_
<a class="link" href="#">_x000D_
<span>Answer</span>_x000D_
</a>_x000D_
</div>_x000D_
</div>_x000D_
</td>_x000D_
</tr>_x000D_
</table>
_x000D_
This works flawlessly @ 2019
.marketing-panel {
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
Just paste this into your line of codes:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Source: Stackoverflow.com