Mengubah Posisi Background dengan Property Background Position

Hai semua, setelah beberapa hari ini saya absen memberikan tutorial kali ini saya hadir kembali dengan memberikan tips untuk kalian para pembaca setia 🙂 oke kali ini saya akan memberikan tips tentang properties pada css yaitu cara Mengubah Posisi Background Dengan Property Background Position

saat kita membuat sebuah background dengan gambar ada kalanya posisi defaultnya tidak pas dengan pembungkus terluarnya nah kita mau tidak mau harus mengubah backgroundnya agar lebih pas posisinya.

Langsung 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;
}

‘

jika di jalankan pada browser maka hasilnya akan seperti ini :

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

Oke sampai bertemu pada artikel yang lainya.

Mengubah Posisi Background dengan Property Background Position

Kategori