193
<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

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
Buffon
  • 3,613
  • 6
  • 21
  • 14

6 Answers6

325
.style1 {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Works in:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

In addition you can try this for an IE solution

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
Blowsie
  • 40,239
  • 15
  • 88
  • 108
  • this working fine but i want to stretch the height only how can i do that – Buffon Apr 14 '11 at 12:18
  • 3
    thanks for help it working when i change that in your code `-moz-background-size: 100% 100%;` it works as i want ... thank u – Buffon Apr 14 '11 at 12:26
  • 1
    Another IE8 and lower solution: https://github.com/louisremi/background-size-polyfill – Irongaze.com Dec 18 '12 at 19:19
  • 6
    worked for me after changing `background-size: cover;` to ` background-size: 100% 100%;` – ivan.mylyanyk Oct 31 '13 at 08:44
  • 1
    I needed a fixed height (130px) and full width. This worked: `background: url("images/bg.jpg") no-repeat center 0 fixed;` and `background-size: 100% 130px;` (etc.). Centering the height (as in the answer) would hide the background if it was short enough. – sleeparrow Jan 03 '17 at 19:31
  • Worked without `fixed` since it was used in a 3D object. Related: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment – Artfaith Dec 20 '21 at 11:48
71

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

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
Calum
  • 5,308
  • 1
  • 22
  • 27
  • 1
    Wow, that worked perfectly for me - I tried the other answers and a series of different techniques. But this was so simple and worked instantly. Thank you :D – DylanT 25 Jan 13 '19 at 05:25
11

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 {
  width: 230px;
}

.style1 {
  text-align: center;
  height: 35px;
}

.bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.bg .linkcontainer {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
}
<table cellpadding="0" cellspacing="0" border="10">
  <tr>
    <td class="style1">
      <div class="bg">
        <img src="http://placekitten.com/20/20" alt="" />
        <div class="linkcontainer">
          <a class="link" href="#">
            <span>Answer</span>
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 1
    +1, correct. It is also a good idea to wrap the `` with a `
    ` having `position: relative;` and maximum width/height. The TD itself is not relative positioned in all browsers, if any.
     – madr Apr 14 '11 at 11:56
  • I was struggling with IE, +1 for that – arjuncc Mar 19 '13 at 13:34
10

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;
}
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
failed_hard
  • 147
  • 2
  • 11
0

Use downloaded images, it took half a day to figure out this. Make a "images" folder add it to main folder.

CSS:

background-images: url(/images/{imagename}.jpg);
background-repeat: no repeat; (if repeat)
background-size: cover;

Good day :D

Flo
  • 2,232
  • 2
  • 11
  • 18
user20938484
  • 1
-9

Just paste this into your line of codes:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Tunaki
  • 132,869
  • 46
  • 340
  • 423
LumiereNG
  • 1