Hintergrundbild CSS dehnen?

175

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

Dies ist mein CSS-Skript

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

Ich möchte das background-imagealles über die <td>Zelle strecken

html css background

— Buffon
quelle

Nur ein Hinweis, dass das Strecken von Rasterbildern die Qualität beeinträchtigt.

— wdm

2

Duplikat von stackoverflow.com/questions/376253/…

— Alex Shesterov

@wdm: Qualitätsminderung tritt nicht auf, wenn es sich um ein SVG handelt.

— Posit Labs

296

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

Arbeitet in:

Safari 3+
Chrome Was auch immer +
IE 9+
Opera 10+ (Opera 9.5 unterstützt die Hintergrundgröße, jedoch nicht die Schlüsselwörter)
Firefox 3.6+ (Firefox 4 unterstützt nicht vom Hersteller vorangestellte Versionen)

Außerdem können Sie dies für eine IE-Lösung versuchen

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

Dank an diesen Artikel von Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

— Blowsie
quelle

das funktioniert gut, aber ich möchte die Höhe nur dehnen, wie kann ich das tun

— Buffon

3

danke für die Hilfe, die es funktioniert, wenn ich das in Ihrem Code ändere, -moz-background-size: 100% 100%;funktioniert es, wie ich will ... danke u

— Buffon

1

Eine andere IE8 und niedrigere Lösung: github.com/louisremi/background-size-polyfill

— Irongaze.com

5

arbeitete für mich nach dem Wechsel background-size: cover;zu "Hintergrundgröße: 100% 100%;"

— ivan.mylyanyk

1

Ich brauchte eine feste Höhe (130px) und volle Breite. Das hat funktioniert: background: url("images/bg.jpg") no-repeat center 0 fixed;und background-size: 100% 130px;(etc.). Durch Zentrieren der Höhe (wie in der Antwort) wird der Hintergrund ausgeblendet, wenn er kurz genug ist.

— Schlafpfeil

61

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

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

Sie können nur Breite oder Höhe angeben mit:

background-size: 100% 50%;

Das wird es 100% der Breite und 50% der Höhe dehnen.

Browserunterstützung: http://caniuse.com/#feat=background-img-opts

— Calum
quelle

1

Wow, das hat perfekt für mich funktioniert - ich habe die anderen Antworten und eine Reihe verschiedener Techniken ausprobiert. Aber das war so einfach und funktionierte sofort. Vielen Dank: D

— DylanT 25

11

Sie können ein Hintergrundbild nicht strecken (bis CSS 3).

Sie müssten die absolute Positionierung verwenden, damit Sie ein Bild-Tag in die Zelle einfügen und es dehnen können, um die gesamte Zelle abzudecken, und dann den Inhalt über das Bild legen können.

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>

Erweitern Sie das Snippet

— Guffa
quelle

1

+1, richtig. Es ist auch eine gute Idee , die wickeln <img>mit einer <div>mit position: relative;und maximaler Breite / Höhe. Der TD selbst ist nicht in allen Browsern relativ positioniert, falls vorhanden.

— Madr

Ich kämpfte mit IE, +1 dafür

— Arjuncc

9

Ich denke, was Sie suchen, ist

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

— failed_hard
quelle

genau das brauche ich!

— Rachelle Uy

1

Dies funktioniert einwandfrei @ 2019

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

— Mujeeb Ishaque
quelle

-7

Fügen Sie dies einfach in Ihre Codezeile ein:

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

— LumiereNG
quelle