Pertanyaan Mulai gambar latar belakang di bawah navbar di Twitter Bootstrap


Pemuda CSS / bootstrap relatif.

Saya telah menghabiskan beberapa saat mencoba untuk mendapatkan gambar latar belakang untuk berintegrasi dengan Twitter Bootstrap menggunakan metode pertama halaman Trik CSS ini. Saya akhirnya menggunakan "tubuh" sebagai tag CSS karena HTML hanya ... tidak berfungsi. Sementara semuanya bekerja dengan baik secara umum, gambar mulai "di belakang" navbar atas dan kemudian memanjang ke bawah, sehingga bagian atas tersembunyi di belakang navbar hitam

Saya sudah mencoba menggunakan margin-top untuk menyelaraskan bagian atas gambar latar belakang dengan bagian bawah navbar, tetapi itu juga memindahkan wadah dan semua konten lebih jauh ke bawah juga (jelas, karena saya meletakkan margin pada seluruh tubuh halaman).

Saya juga mencoba membuat kelas yang unik untuk gambar latar belakang (backgroundimage), dan menempatkan div tepat di dalam tag body dan menutup div tepat sebelum tag html dekat, tetapi sekali lagi, menyesuaikannya menyesuaikan semua konten halaman, bukan hanya gambar latar belakang.

Memindahkan div untuk gambar latar belakang di bawah navbar menguncinya ke ruang "penampung" aktif, jadi gambar latar belakang sekarang hanya ada di sepertiga tengah layar.

body { 
    background: url(../images/height-chart500w.png) repeat-y fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 15%;
}

Mengingat sifat pengubahan ukuran dari gambar latar belakang, solusi hacking hanya dengan mengubah gambar itu sendiri untuk membuat ruang di atas jelas tidak akan berfungsi. Bagaimana cara CSS gambar latar belakang di bawah navbar?


5
2017-07-10 12:49


asal


Jawaban:


Gunakan latar belakang-posisi. Dibutuhkan dua nilai: satu untuk sumbu x, yang lainnya untuk sumbu y. Dalam kasus Anda itu akan menjadi sesuatu seperti:

background-position: 0 Y; di mana Y akan menjadi ketinggian navbar.


7
2017-07-10 12:54



terlambat ke pesta tetapi berkat jawaban ini saya mendapatkan halaman untuk ditampilkan sesuai keinginan, ini adalah kode CSS saya. berharap bisa membantu teman baru

header.masthead {

  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: white;
  background-image: url("../img/testimage5.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 992px) {
  header.masthead {

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    background-image: url("../img/testimage5.jpg");
    background-position: 0 20px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
  }
}

1
2017-11-12 11:55



Saya memeriksa blog www.builtwithbootstrap.com sebagai contoh dan tampaknya orang ini menggunakan ini: www.1in5photo.com

body {
position: relative;
padding-top: 20px;
background-color: black;
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
background-position: 0 40px;
}

0
2017-07-10 12:52