Gambar sebagai Background

Url adalah alamat gambar yang tersimpan online

Conto1

<div style="border-radius: 20px; border: 0px solid gray; height: 600px; overflow: hidden; position: relative; width: 100%;">

<!--Background tetap diam dan tidak terpotong-->

<div style="background-attachment: scroll; background-image: Url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROw3PcnIg6ZOroCc3-QXv4s4ArTJNkhYhlNA&amp;sg'); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 100%; height: 100%; left: 0px; opacity: 0.8; position: absolute; top: 0px; width: 100%; z-index: 1;"></div>

<!--Teks isi di atas background-->

<div style="height: 100%; overflow-y: scroll; padding: 10px; position: relative; scrollbar-width: none; z-index: 2;">

<style>

div::-webkit-scrollbar {

display: none;

    }

  </style>

Contoh 2

<div style="border-radius: 20px; border: 0px solid gray; height: 1000px; overflow: hidden; position: relative; width: 780px;">

<!--Background tetap diam dan tidak terpotong-->

<div style="background-attachment: scroll; background-image: url('https://cdn2.imgpog.com/660399838a3fdb435282c7a3.jpg'); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 100%; height: 100%; left: 0px; opacity: 0.8; position: absolute; top: 0px; width: 100%; z-index: 1;">

</div>

<!--Teks isi di atas background-->

<div style="font-family: Caveat; font-size: x-large; height: 100%; overflow-y: auto; padding: 30px; position: relative; z-index: 2;">

<div style="font-family: Caveat, cursive; font-size: x-large; position: relative; z-index: 2;">

Tanpa Sentuhanmu
Iya lah sayang,
Tanpa sentuhanmu aku merasa tak nyaman.
Seperti angin yang hilang dari malam,
Hatiku beku, rindu pun diam.

Langit tak berbintang,
Meski malam tak hujan.
Karena bayangmu tak singgah di pandang,
Jiwaku gelisah, menanti kepastian.

Setiap detik kutata namamu di doa,

Namun angin tak kunjung menyampaikannya.
Apakah kau dengar debaran di dada?
Yang hanya tenang saat kau menyapa.

iya lah sayang,
Jarak ini hanyalah ujian.
Tapi rindu yang tak kunjung reda,
Menetes perlahan jadi air mata.

Kalau ku tahu derita ini akan berakhir,
Akan ku biar bumi berputar,
Sesuai kehendak Yang Kuasa,
Sambil kusimpan harap dalam sabar



💙 

Background Gambar padding: 0px

<div style="border-radius: 20px; border: 0px solid gray; height: 600px; overflow: hidden; position: relative; width: 100%;">

<!-- Latar belakang -->
<div style="
background-attachment: scroll;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLtVbkO54A7YH7jU555kaJq75dSVALYZZgmLoiTXQyXlFJsQdFTaV5_Mkl_tNJt3k7RywawZKghdwr1MJgLrB9DNzBLgsSvs105YQsR8RAOKU8YEtPOkhepvZaliyV8H8bPzsHk0rGfDFY9CDcjoYpAhR6kxSKq0yVeyBFZv2-KuP0Ik4AyQub_5DmeFI/s1600/image%20%282%29.png');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
z-index: 1;">
</div>

<!-- Konten di atas background -->
<div style="
height: 100%;
overflow-y: scroll;
padding: 0px 0px 0px 0px;
margin: 0;
position: relative;
z-index: 2;
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: #fff;
scrollbar-width: none;
text-align: left;">

<!-- Scrollbar hilang di Chrome -->
<style>
div::-webkit-scrollbar {
display: none;
}
</style>

<div style="padding-left: 10px; padding-right: 10px;">

<p><strong>🌿 Umanah Ayah:</strong></p>
<p>“Ayah tidak akan tinggalkan kamu sendirian, nak. Meski dunia ini berat, iman kita yang akan jadi cahaya.”</p>
<p>Inilah pesan ayah kepada anaknya, di antara senja yang tak berhenti mengejar pagi.</p>
</div>
</div>
</div>

<!-- Tambahkan Roboto jika belum -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">💙