Css achtergrondafbeelding uitrekken?

Dit is mijn CSS-script

.style1 {
  background-image: url('https://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

Ik wil de background-imageuitrekken over de hele <td>cel

Antwoord 1, autoriteit 100%

.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;
}

Werkt in:

• Safari 3+
• Chrome Wat dan ook+
• IE 9+
• Opera 10+ (Opera 9.5 ondersteunde achtergrondgrootte, maar niet de trefwoorden)
• Firefox 3.6+ (Firefox 4 ondersteunt versie met prefix van niet-leverancier)

Bovendien kunt u dit proberen voor een IE-oplossing

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

Met dank aan dit artikel van Chris Coyier
http://css-tricks.com/perfect-full-page-background- afbeelding/

Antwoord 2, autoriteit 21%

CSS3: http://webdesign.about.com/od/styleproperties/ p/blspbgsize.htm

.style1 {
  ...
  background-size: 100%;
}

U kunt alleen maar een breedte of hoogte opgeven met:

background-size: 100% 50%;

die het 100% van de breedte en 50% van de hoogte zal strekken.

browserondersteuning: http://caniuse.com/# feat = achtergrond-img-opts

Antwoord 3, Autoriteit 4%

U kunt een achtergrondafbeelding (tot CSS 3) niet rekken.

U zou absolute positionering moeten gebruiken, zodat u een beeldlabel in de cel kunt plaatsen en het uitstrekken om de volledige cel te bedekken en vervolgens de inhoud bovenop de afbeelding te plaatsen.

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="https://placekitten.com/20/20" alt="" />
        <div class="linkcontainer">
          <a class="link" href="#">
            <span>Answer</span>
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

.style1 {
  background: url('https://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;
}

.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />