Mengalami masalah dalam mengidentifikasi/menghilangkan batas di sekitar gambar latar belakang layar penuh saya, atau menemukan alternatif untuk kodenya yang tidak akan menyebabkan masalah ini. maaf pemula banget

Ini HTML saya

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon"/>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <title>xx</title>
  </head>
  <body>
  <div class="bg">

    <p>content</p>

</div>
  </body>
</html>

Ini cssnya

body, html {
    height: 100%;
    color: #cccccc;
    text-align: center;
    margin: 0;
    padding: 0; 
  }
  
  .bg {
    /* The image used */
    background-image: url("bg.jpg");
  
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

Terima kasih sebelumnya.

0
xii 12 Mei 2021, 13:20

3 jawaban

Jawaban Terbaik

Gunakan kode di bawah ini akan menghapus semua masalah, saat menggunakan pemilih '*' itu akan berlaku untuk semua elemen di DOM.

*{
    padding: 0;
    margin: 0;
}
body, html {
    height: 100%;
    color: #cccccc;
    text-align: center;
}

.bg {
    /* The image used */
    background: blue;

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
0
Masood Alam 12 Mei 2021, 10:35

Mungkin Anda hilang untuk menambahkan properti ukuran kotak.

Di bagian atas file CSS Anda tambahkan ini...

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Kemudian tambahkan secara terpisah

html, body{
    margin: 0;
    padding: 0; 
    height: 100%;
    color: #cccccc;
    text-align: center;
  }
0
Avro_Abir 12 Mei 2021, 10:45

Jika Anda berbicara tentang margin, Anda hanya perlu menambahkan "*" ke gaya "body, html". Ini menghilangkan margin/padding untuk semua elemen di dom.

body, html, * {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}
0
Anthony 12 Mei 2021, 10:25