Image de fond extensible css?

176

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

Ceci est mon script CSS

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

Je veux m'étirer background-imagepartout dans la <td>cellule

html css background

— Buffon
source

Juste une note que l'étirement des images raster dégrade la qualité.

— wdm

2

duplicata de stackoverflow.com/questions/376253/…

— Alex Shesterov

@wdm: la dégradation de la qualité ne se produira pas si c'est un svg.

— posit labs

297

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

Travaille dans:

Safari 3+
Chrome peu importe +
IE 9+
Opera 10+ (Opera 9.5 prend en charge la taille de l'arrière-plan mais pas les mots-clés)
Firefox 3.6+ (Firefox 4 prend en charge la version préfixée non-fournisseur)

De plus, vous pouvez essayer ceci pour une solution IE

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

Crédit à cet article de Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

— Blowsie
source

cela fonctionne bien mais je veux étirer la hauteur seulement comment puis-je faire cela

— Buffon

3

merci de l'aider à fonctionner quand je change cela dans votre code, -moz-background-size: 100% 100%;cela fonctionne comme je veux ... merci

— Buffon

1

Une autre solution IE8 et inférieure: github.com/louisremi/background-size-polyfill

— Irongaze.com

6

a travaillé pour moi après être passé background-size: cover;à `background-size: 100% 100%;`

— ivan.mylyanyk

1

J'avais besoin d'une hauteur fixe (130px) et d'une largeur totale. Cela a fonctionné: background: url("images/bg.jpg") no-repeat center 0 fixed;et background-size: 100% 130px;(etc.). Centrer la hauteur (comme dans la réponse) masquerait l'arrière-plan s'il était suffisamment court.

— sleeparrow

62

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

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

Vous pouvez spécifier uniquement la largeur ou la hauteur avec:

background-size: 100% 50%;

Ce qui l'étirera à 100% de la largeur et à 50% de la hauteur.

Prise en charge du navigateur: http://caniuse.com/#feat=background-img-opts

— Calum
source

1

Wow, cela a parfaitement fonctionné pour moi - j'ai essayé les autres réponses et une série de techniques différentes. Mais c'était tellement simple et a fonctionné instantanément. Merci: D

— DylanT 25 janv.13 '19

11

Vous ne pouvez pas étirer une image d'arrière-plan (jusqu'à CSS 3).

Vous devrez utiliser un positionnement absolu, afin de pouvoir mettre une étiquette d'image à l'intérieur de la cellule et l'étirer pour couvrir toute la cellule, puis placer le contenu au-dessus de l'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>

Développer l'extrait

— Guffa
source

1

+1, c'est correct. Il est aussi une bonne idée d'envelopper le <img>avec une <div>ayant position: relative;largeur / hauteur et maximum. Le TD lui-même n'est pas positionné de manière relative dans tous les navigateurs, le cas échéant.

— madr le

J'avais du mal avec IE, +1 pour ça

— arjuncc

9

Je pense que ce que tu cherches c'est

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

c'est exactement ce dont j'ai besoin!

— Rachelle Uy

0

Cela fonctionne parfaitement @ 2019

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

— Mujeeb Ishaque
source

-7

Collez simplement ceci dans votre ligne de codes:

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

— LumiereNG
source