Meregangkan gambar latar belakang 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>

Ini adalah skrip CSS saya

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

Saya ingin meregangkan background-imageseluruh <td>sel

html css background

— Buffon
sumber

Hanya sebuah catatan bahwa peregangan gambar raster menurunkan kualitas.

— wdm

2

duplikat stackoverflow.com/questions/376253/…

— Alex Shesterov

@wdm: penurunan kualitas tidak akan terjadi jika ini adalah 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;
}

Bekerja di:

Safari 3+
Chrome Apapun +
IE 9+
Opera 10+ (Opera 9.5 mendukung ukuran latar belakang tetapi bukan kata kunci)
Firefox 3.6+ (Firefox 4 mendukung versi awalan non-vendor)

Selain itu Anda dapat mencoba ini untuk solusi IE

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

Kredit untuk artikel ini oleh Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

— Blowsie
sumber

ini bekerja dengan baik tetapi saya ingin meregangkan ketinggian hanya bagaimana saya bisa melakukan itu

— Buffon

3

terima kasih atas bantuannya bekerja ketika saya mengubah itu dalam kode Anda -moz-background-size: 100% 100%;berfungsi seperti yang saya inginkan ... terima kasih

— Buffon

1

IE8 dan solusi lain yang lebih rendah: github.com/louisremi/background-size-polyfill

— Irongaze.com

6

bekerja untuk saya setelah mengubah background-size: cover;ke `background-size: 100% 100%;`

— ivan.mylyanyk

1

Saya membutuhkan ketinggian tetap (130px) dan lebar penuh. Ini berhasil: background: url("images/bg.jpg") no-repeat center 0 fixed;dan background-size: 100% 130px;(dll.). Menengahkan ketinggian (seperti pada jawaban) akan menyembunyikan latar belakang jika itu cukup pendek.

— sleeparrow

62

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

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

Anda dapat menentukan hanya lebar atau tinggi dengan:

background-size: 100% 50%;

Yang akan merentangkannya 100% dari lebar dan 50% dari tinggi.

Dukungan browser: http://caniuse.com/#feat=background-img-opts

— Calum
sumber

1

Wow, itu bekerja dengan baik untuk saya - saya mencoba jawaban lain dan serangkaian teknik yang berbeda. Tetapi ini sangat sederhana dan bekerja secara instan. Terima kasih: D

— DylanT 25

11

Anda tidak dapat meregangkan gambar latar belakang (hingga CSS 3).

Anda harus menggunakan penentuan posisi absolut, sehingga Anda dapat menempatkan tag gambar di dalam sel dan merentangkannya untuk menutupi seluruh sel, lalu meletakkan konten di atas gambar.

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>

Luaskan cuplikan

— Guffa
sumber

1

+1, benar. Ini juga merupakan ide yang baik untuk membungkus <img>dengan <div>memiliki position: relative;dan lebar / tinggi maksimum. TD itu sendiri tidak berada pada posisi relatif di semua browser, jika ada.

— madr

Saya berjuang dengan IE, +1 untuk itu

— arjuncc

9

Saya pikir apa yang Anda cari

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

— Gagal
sumber

inilah yang saya butuhkan!

— Rachelle Uy

0

Ini berfungsi dengan sempurna @ 2019

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

— Mujeeb Ishaque
sumber

-7

Cukup tempel ini ke dalam baris kode Anda:

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

— LumiereNG
sumber