Tutorial CSS Untuk Pemula - Belajar Menggunakan Property Background Pada CSS (bagian kedua)

Jan 05, 2020

Setelah kita mempelajari dan mempraktekkan tentang penggunaan properti background-image pada tutorial sebelumnya maka pada kesempatan kali ini kita akan melanjutkan pembahasan tentang beberapa properti background yang dapat digunakan dalam mengatur tatanan background image yang kita terapkan.

Setidaknya ada tiga macam properti background yang akan kita bahas dan kita pelajari pada tutorial kali, yaitu background-repeat, background-position dan background atachment.

Tanpa berlama-lama lagi kita langsung saja kita bahas satu persatu property background tersebut.

Tapi sebelumnya pastikan folder belajar_property_background_css yang kita buat pada tutorial sebelumnya masih melekat didesktop anda dan teks editor juga bowser anda bisa berfungsi dengan baik.

folder belajar_property_background_css

Mengenal Beberapa Macam Property Background dan Nilai Yang Bisa Digunakan Padanya

Background repeat

Properti background-repeat berfungsi untuk mengatur apakah background image yang kita terapkan akan ditampilkan secara berulang atau hanya sekali atau satu buah gambar saja.

Setidaknya ada 6 nilai yang kita bisa kita gunakan pada background repeat ini yaitu :

  • repeat-x : Berfungsi untuk menampilkan gambar berulang secara horizontal.

contoh penulisan kode :

backgrund-repeat: repat-x;
  • repeat-y : berfungsi untuk menampilkan gambar berulang secara vertikal

contoh penulisan kode :

backgrund-repeat: repat-y;
  • repeat : berfungsi untuk menampilkan gambar berulang secara horizontal dan vertikal

contoh penulisan kode :

backgrund-repeat: repat;
  • no-repeat : berfungsi untuk menonaktifkan perulangan gambar

contoh penulisan kode :

backgrund-repeat: no-repeat;
  • initial : berfungsi untuk mengembalikan nilai menjadi default

contoh penulisan kode :

backgrund-repeat: initial;
  • inherit : berfungsi untuk memberikan nilai yang sama dengan nilai yang dimiliki oleh Tag atau Element HTML yang memuatnya

contoh penulisan kode :

backgrund-repeat: inherit;

Sekarang waktunya kita mencoba mempraktekkan nilai-nilai property background-repeat diatas.

Silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy paste kode dibawah ini:

<html>
<head>
<title>Belajar Menggunakan Property background-repeat</title>
<style>
body{
    background-image: url('bg.jpg');
    background-repeat : repeat-x;
    color: white;
    font-size:35px;
    text-align: center;
}
</style>
</head>
<body>
Saya sedang belajar mengatur perulangan gambar background dengan property backround-repat!!!
</body>
</html>

Kemudian simpan di dalam folder belajar_background_image_css  dengan nama background_repeat_x.html lalu jalankan di browser anda maka hasilnya kira-kira seperti ini:

hasil penerapan nilai repeat-x pada property background-repeat

Sekarang coba anda ganti nilai repeat-x menjadi repeat-y kemudian siman dan jalankan kembali d browser anda, maka hasilnya kira-kira seperti ini :

hasil penerapan nilai repeat-y pada property background-repeat

Untuk nilai yang lain silahkan anda coba praktekkan sendiri dengan menggantinya pada bagian nilai atau value seperti diatas.

Background-position

Properti background-position berfungsi untuk mengatur posisi background image yang kita terapkan.

Ada beberapa macam nilali yang bisa digunakan pada property background-position ini, diantaranya yaitu :

  • left top : mengatur posisi gambar ke sebelah kiri atas
  • left center : mengatur posisi gambar ke sebelah kiri tengah
  • left bottom : mengatur posisi gambar ke sebelah kiri bawah
  • right top : mengatur posisi gambar ke sebelah kanan atas
  • right center: mengatur posisi gambar ke sebelah kanan tengah
  • right bottom: mengatur posisi gambar ke sebelah kanan bawah
  • center top: mengatur posisi gambar ke bagian tengah atas
  • center center : mengatur posisi gambar ke bagian tengah
  • center bottom : mengatur posisi gambar ke bagian tengah bawah

Contoh penulisan kodenya adalah seperti ini :

background-position : top left;

Untuk mempraktekkan penggunaan kode diatas silahkan buka kembali teks editor anda (buat file baru) kemudian ketikkan atau copy-paste kode dibawah ini :

<html>
<head>
<title>Belajar Menggunakan Property background-position</title>
<style>
body{
    background-image: url('bg.jpg');
    background-repeat : no-repeat;
    background-position : right bottom;
    color: white;
    font-size:35px;
    text-align: center;
}
</style>
</head>
<body>
Saya sedang belajar mengatur posisi gambar background dengan property backround-position!!!
</body>
</html>

Kemudian simpan di dalam folder belajar_background_image_css  dengan nama background_position.html lalu jalankan di browser anda maka hasilnya kira-kira seperti ini:

hasil penerapan nilai right bottom pada property background-position

Untuk mencoba nilai lain cukup anda ganti nilai "right bottom" menjadi nilai apa saja yang anda inginkan dari nilai-nilai yang sudah disebutkan diatas kemudian simpan lalu jalankankan kembali dibrowser anda untuk melihat hasilnya.

Background-attachment

Properti background attachment berfungsi untuk mengatur pergerakan gambar ketika terjadi pergerakan scroll halaman website, apakah gambar ikut bergerak mengikuti scroll ataukah gambar tetap diam saja ditempat.

Dalam penggunaanya properti background-attachment ini memiliki beberapa macam nilai dan pada kesempatan kali ini kita hanya akan membahas dua nilai saja yaitu scroll dan fixed.

  • Scroll berfungsi untuk membuat gambar tetap diam ditempat

contoh penulisan kode :

background-attachment : scroll;

Fixed berfungsi untuk membuat gambar bergerak mengikuti pergerakan scroll

contoh penulisan kode :

background-attachment : fixed;

Untuk melihat hasil dari penggunaan kode diatas silahkan buka teks editor anda (buat file baru) kemudian ketikkan atau copy-paste kode dibawah ini :

<html>
<head>
<title>Belajar Menggunakan Property background-position</title>
<style>
body{
    color: white;
    font-size:35px;
    text-align: center;
    background-image: url('bg.jpg');
    background-repeat : repeat;
    background-attachment : fixed;
}

div{
    margin-top: 100%;
    margin-bottom: 100%;
}
</style>
</head>
<body>
Saya sedang belajar mengatur pergerakan gambar background dengan property backround-attachment!!!
<br>
ini bagian atas
<div></div>
<div></div>
ini bagian bawah
</body>
</html>

Kemudian simpan di dalam folder belajar_background_image_css  dengan nama background_attachment.html lalu jalankan di browser anda maka hasilnya gambar akan mengikuti pergerakan scroll atau dengan kata lain ukuran dan posisi gambar akan tetap seperti pada gambar dibawah ini :

gambar background pada konten dibagian atas

Kemudian setelah di scroll gambar akan tetap seperti pada gambar dibawah ini :

gambar background ketika telah discroll hingga ke bagian bawah

untuk melhat perbandingan dengan nilai scroll, silahkan anda ganti nilai fixed menjadi scroll, kemudian simpan lalu jalankan kembali dibrowsser anda, maka hasilnya adalah gambar menjadi diam dan tidak mengikuti pergerakan scroll.

Background-size

Property background-size berfungsi untuk mengatur ukuran gambar background.

Property background ini memiliki beberapa nilai yang bisa digunakan, diantaranya yaitu :

  • auto : berfungsi untuk mengatur gambar ke ukuran aslinya. Ini adalah nilai default.

contoh penulisan :

backgrund-size : auto;
  • ukuran : yaitu ukuran lebar dan panjang gambar. Kita bisa mengatur dengan memberikan nilai berupa angka yang diakhiri dengan sebuah satuan ukuran tertentu.

rumus penulisan kode :

backgrund-size : nilai_lebar nilai_panjang;

contoh penulisan kode :

backround-size : 100% 100%;

atau bisa juga seperti ini :

backround-size : 500px 500px;

Agar lebih jelas mari kita praktekkan kode diatas.
Lanngsung saja, silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini :

<html>
<head>
<title>Belajar Menggunakan Property background-position</title>
<style>
body{
    color: white;
    font-size:35px;
    text-align: center;
    background-image: url('bg.jpg');
    background-repeat : no-repeat;
    background-position : right center;
    background-attachment : fixed;
    background-size : 100% 100%;
}

div{
    margin-top: 50%;
    margin-bottom: 50%;
}
</style>
</head>
<body>
Saya sedang belajar mengatur ukuran gambar background dengan property backround-size!!!
<br>
ini bagian atas
<div></div>
<div></div>
<div></div>
ini bagian bawah
</body>
</html>

Kemudian simpan di dalam folder belajar_background_image_css  dengan nama background_size lalu jalankan di browser anda maka hasilnya kira-kira akan seperti ini :

hasil penerapan nilai 100% 100% pada property background-size

Menyingkat Penulisan Kode Property Background Pada CSS

Untuk menghemat waktu, tenaga, pikiran, biaya dan juga agar lebih rapi kita bisa menyingkat penulisan kode property backrgound dengan cara menjadikannya dalam satu baris kode.

Sebagai contoh, misal kita menggunakan kode CSS sebagai berikut :

background-color: black;
background-image: url('bg.jpg');
background-repeat : no-repeat;
background-position : right center;
background-attachment : fixed;
background-size : 100% 100%;

Maka kita bisa menyingkat penulisan kodenya menjadi seperti ini :

background : black url('bg.jpg') no-repeat right center fixed 100% 100%;

Sangat simple bukan?

Nah, itulah beberapa property background yang bisa kita gunakan untuk mengatur gambar backround pada website kita dan juga cara menggunakannya.

Bagaimana? Sangat mudah untuk dipahami bukan?

Alhamdulillah bertambah lagi pengetahuan kita tentang kode CSS.

Selanjutnya kita akan belajar apa lagi?

Pada tutorial selanjutnya in sya aLLAH kita akan belajar tentang :

.

Penasaran? langsung saja klik disini untuk membaca tutorialnya.

Semoga bermanfaat.

ibnulhusainan

Saya sangat suka belajar berbagai macam bahasa pemrograman.

No results for your search, try something different.