Mengubah Posisi Background dengan Property Background Position

Hallo seluruh, setelah beberapa hari ini saya absen memberikan panduan kali ini saya hadir kembali dengan memberikan tips bagi kalian para pembaca setia 🙂 oke kali ini saya akan memberikan tips mengenai properties di css yaitu cara Mengubah Posisi Background Dengan Property Background Position

 

dikala kita merancang sebuah background dengan gambar ada kalanya posisi defaultnya tak pas dengan pembungkus terluarnya nah kita mau tak mau mesti mengubah backgroundnya agar lebih pas posisinya.

Seketika saja kita praktek silahkan salin code berikut :

 

<div class=container>
  <h1>Dengan persentase</h1>
  <div class=el position-percentage></div>
<br>
  <h1>Dengan pixel</h1>
  <div class=el position-pixel></div>
</div>

 

CSS//

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 90%;
}

.el {
  width: 100%;
  height: 400px;
  background-color: #ffd376;
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-position/sun.png);
  background-repeat: no-repeat;
}

.position-percentage {
  background-position: 50% 100%;
}

.position-pixel {
  background-position: 30px 45px;
}

code {
  background-color: #eee;
  padding: 1px 5px;
}

 

‘

bila di jalankan di browser karenanya hasilnya akan seperti ini :

 

 

 

Nah ada dua style yang pertama-tama menggunakan persentase dan yang ke dua menggunakan satuan pixel, bila kalian ingin mengubah posisinya tinggal kalian atur saja seperti pengaturan margin.

 

Oke hingga bertemu di artikel yang lainya.

Sumber https://kursuswebsite.org