Fixed Background Image CSS

1 126

Contoh Membuat fixed background image (image background tetap)

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(https://www.infokoding.com/wp-content/uploads/2017/10/img_tree.png);
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Gambar latar belakangnya tetap. Cobalah gulir ke bawah halaman.</p>
<p>Jika Anda tidak melihat scrollbar apapun, coba ubah ukuran jendela browser.</p>

</body>
</html>

Coba Layout Editor »

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] Cara mengulang gambar background hanya secara horisontal Bagaimana memposisikan gambar background Gambar background tetap (gambar ini tidak akan bergulir dengan sisa halaman) Semua properti background dalam satu deklarasi Contoh background yang lebih […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.