Latar belakang gradien CSS3 yang diatur pada body tidak meregang tetapi malah mengulangi?

430

ok katakan konten di dalam <body>total 300px tinggi.

Jika saya mengatur latar belakang saya <body>menggunakan -webkit-gradientatau-moz-linear-gradient

Lalu saya memaksimalkan jendela saya (atau membuatnya lebih tinggi dari 300px) gradien akan persis 300px tinggi (tinggi konten) dan ulangi saja untuk mengisi sisa jendela.

Saya berasumsi ini bukan bug karena sama di kedua webkit dan tokek.

Tetapi apakah ada cara untuk membuat peregangan gradien untuk mengisi jendela, bukan mengulangi?

css gradient JD Isaacks
sumber

718

Terapkan CSS berikut:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Sunting: Ditambahkan margin: 0;ke deklarasi badan per komentar ( Martin ).

Sunting: Ditambahkan background-attachment: fixed;ke deklarasi badan per komentar ( Johe Green ).

Bryan Downing
sumber

4

Saya juga menemukan bahwa saya perlu untuk menambahkan margin:0;pada bodyatau aku mendapat celah di bagian bawah halaman saya.

Martin

8

Di Chrome dan Safari, body {height: 100%} hasil di halaman (tetapi tidak gradien) meluas keluar dari viewport.

thSoft

13

Saya harus menambahkan lampiran latar belakang: diperbaiki; ke tubuh untuk menyingkirkan celah bawah (Webkit).

j7nn7k

4

Mengatur latar belakang ke tubuh dan kemudian ketinggian tag html ke 100% melakukan hal-hal aneh di Internet Explorer. Ini sebuah contoh (png).

Justin Force

21

Pastikan bahwa background-repeatdan background-attachmentdatang setelah Anda backgroundaturan. Jika tidak, latar belakang mungkin masih berulang.

kellen

159

Mengenai jawaban sebelumnya, pengaturan htmldan bodyuntuk height: 100%sepertinya tidak berfungsi jika konten perlu digulir. Menambahkan fixedke latar belakang tampaknya memperbaikinya - tidakneed for height: 100%;

Misalnya:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Luaskan cuplikan

Joshua Rudd
sumber

5

Ini berfungsi untuk saya di setiap browser yang saya uji (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] dan Opera [Mac]) tanpa efek samping scrollbar dari "height: 100%" larutan. Terima kasih!

pipwerks

7

Catatan untuk orang-orang yang menggunakan Sass / Kompas. Anda tidak dapat mengatur "diperbaiki" secara langsung di mixin sehingga untuk menambahkan diperbaiki Anda menambahkan propertibackground-attachment: fixed

Kyle Mathews

2

Jika Anda ingin latar belakang mengisi jendela, atau konten (mana yang lebih besar) kemudian gunakan min-height:100%(di browser yang kompatibel)

cjk

Saya dapat menjalankan kode berikut menggunakan Kompas: @sertakan latar belakang (linear-gradient (atas, merah 0%, biru 100%) diperbaiki);

mcranston18

Bagaimana saya menambahkan warna ketiga?

sbaden

17

Saya tahu saya terlambat ke pesta, tapi inilah jawaban yang lebih solid.

Yang perlu Anda lakukan adalah menggunakan min-height: 100%;alih-alih height: 100%;dan latar belakang gradien Anda akan memperpanjang seluruh ketinggian viewport tanpa berulang, bahkan jika konten dapat digulir.

Seperti ini:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

Ricardo Zea
sumber

Kecuali jika Anda perlu mengatur tinggi html menjadi 100%, misalnya jika Anda membutuhkan footer footer

masing

15

Inilah yang saya lakukan untuk menyelesaikan masalah ini ... ini akan menampilkan gradien untuk panjang penuh konten, kemudian mundur ke warna latar belakang (biasanya warna terakhir di gradien).

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

Luaskan cuplikan

Saya telah menguji ini di FireFox 3.6, Safari 4, dan Chrome, saya menjaga warna latar belakang di tubuh untuk browser apa pun yang karena alasan tertentu tidak mendukung penataan tag HTML.

John Sanford
sumber

13

Pengaturan html { height: 100%}dapat mendatangkan malapetaka dengan IE. Ini sebuah contoh (png). Tapi tahukah Anda apa yang bekerja dengan baik? Cukup atur latar belakang Anda pada <html>tag.

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Latar belakang meluas ke bawah dan tidak ada perilaku gulir yang aneh terjadi. Anda dapat melewati semua perbaikan lainnya. Dan ini didukung secara luas. Saya belum menemukan browser yang tidak memungkinkan Anda menerapkan latar belakang ke tag html. Ini adalah CSS yang benar-benar valid dan sudah cukup lama. :)

Justin Force
sumber

1

@ Lynda Itu bukan tanggapan yang sangat membantu. Maukah Anda memberikan case yang tidak berfungsi?

Justin Force

Maaf karena tidak jelas. Saya tidak yakin mengapa itu tidak berhasil. Anda dapat menambahkan gradien ke htmltetapi itu menghentikan sebagian jalan halaman dalam kasus saya. Menambahkan background-attachment:fixedtidak menyelesaikan masalah. Saya telah melihat ini terjadi di lebih dari satu situs tetapi belum dapat menemukan penyebabnya.

L84

Inti dari solusi ini adalah ia berfungsi di seluruh browser (pada tahun 2012, omong-omong). Tetapi Anda masih belum menunjukkan browser apa yang sedang Anda bicarakan. Jika Anda masih mengalami masalah, coba tambahkan html, body { height: 100%; }.

Justin Force

Benar. Ini terjadi di Firefox dan Chrome (tidak menguji di browser lain) dan saya mencoba ketinggian dan berbagai pengaturan lainnya tanpa hasil (kecuali lampiran latar belakang). Oh well, bukan masalah besar dan semoga jawaban Anda masih bekerja untuk sebagian besar. =>

L84

Masih harus membodohi tanpa-ulangi dan memperbaiki.

MarsAndBack

12

Ada banyak informasi parsial di halaman ini, tetapi tidak lengkap. Inilah yang saya lakukan:

Buat gradien di sini: http://www.colorzilla.com/gradient-editor/
Atur gradien pada HTML alih-alih BODY.
Perbaiki latar belakang pada HTML dengan "background-attachment: fix;"
Matikan margin atas dan bawah pada BODY
(opsional) Saya biasanya membuat <DIV id='container'>yang saya masukkan semua konten saya

Berikut ini sebuah contoh:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

Ini telah diuji dengan IE, Chrome, dan Firefox pada halaman dengan berbagai ukuran dan kebutuhan gulir.

Rick Smith
sumber

1

Bagus! Saya menggunakan colorzilla dan jawaban utama tidak berhasil untuk saya. Yang ini. Terima kasih! :)

Filly

Mengapa preferensi Anda melakukannya pada HTML, bukan pada BODY?

sashaikevich

@sashaikevich Pertanyaan bagus. Saya belum pernah melihat jawaban ini dalam 5 tahun jadi saya tidak ingat sama sekali. Alasan saya melakukannya bahkan mungkin tidak berlaku dengan semua pembaruan browser. Jika Anda memindahkan semuanya ke tubuh, saya ingin tahu apakah itu bekerja sama.

Rick Smith

@ RickSmith Tidak, saya menata html. Tapi, saya memang memindahkan aturan untuk diterapkan pada tubuh sekarang untuk memeriksa, dan itu tidak membuat perbedaan. Mungkin itu adalah peramban yang lama ...

sashaikevich

4

Kotor; mungkin Anda bisa menambahkan min-height: 100%; ke html, dan tag tubuh? Itu atau setidaknya menetapkan warna latar belakang default yang merupakan warna gradien akhir juga.

subv3rsion
sumber

1

Latar belakang default yang ditetapkan sebagai warna gradien akhir akan menjadi solusi yang bagus jika gradien berhenti, tetapi tidak hanya menghentikannya berulang sehingga latar belakang default hanya akan terlihat jika gradien tidak didukung.

JD Isaacks

2

Saya kesulitan mendapatkan jawaban di sini untuk bekerja.
Saya menemukan itu bekerja lebih baik untuk memperbaiki div ukuran penuh di dalam tubuh, memberikan indeks z negatif, dan melampirkan gradien padanya.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Inilah contoh lengkap https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

lebihfromalan
sumber

0

Saya telah menggunakan kode CSS ini dan berhasil untuk saya:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

Informasi terkait adalah bahwa Anda dapat membuat gradien hebat Anda sendiri di http://www.colorzilla.com/gradient-editor/

/ Sten

Netsi1964
sumber

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

Joe
sumber

1

Harap tambahkan beberapa penjelasan tentang aspek-aspek kunci dari solusi Anda.

Rachcha

-1

inilah yang saya lakukan:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

sebelum saya melayang badan, ada celah di atas, dan itu menunjukkan warna latar belakang html. jika saya menghapus bgcolor html, ketika saya gulir ke bawah, gradien dipotong. jadi saya melayang tubuh dan mengatur posisinya menjadi relatif dan lebarnya menjadi 100%. itu bekerja pada safari, chrome, firefox, opera, internet expl .. oh tunggu. : P

apa yang kalian pikirkan?

grizzy
sumber

-4

alih-alih 100% saya hanya menambahkan beberapa pixxel punya ini sekarang dan berfungsi untuk seluruh halaman tanpa celah:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

PASIR
sumber

3

bagaimana dengan halaman dengan tinggi> 1420 px?

veritas

Latar belakang gradien CSS3 yang diatur pada body tidak meregang tetapi malah mengulangi?

Jawaban: