Blog Request tutorial? klik disini!

  • Background Origin

    Ditulis oleh: Aulia Rahmah Alhafidz
    641 kali dibaca
    24 Sep / 2014 08:51

    Bagaimana caranya menyesuaikan gambar dengan tulisan? Bagaimana cara menentukan daerah untuk background? Mudah saja, cukup dengan menggunakan properties background-origin pada CSS. Apa itu background-origin?

    Properties background-origin akan menentukan posisi wilayah background-image. background-image dapat ditempatkan dalam area content-box, padding-box atau border-box.

    Berikut adalah values yang bisa digunakan pada properti background-origin :
    border-box
    background akan meluas ke tepi luar perbatasan tapi berada di bawah perbatasan z-index.
    padding-box
    background akan meluas ke tepi luar padding
    content-box
    background akan diwarnai dalam content  box.

    Contohnya seperti berikut :

    See the Pen JGLIB by Dumet_School (@dumet_school) on CodePen.

    Terlihat bukan perbedaannya?

    Background origin support pada browser IE 9.0, Chrome 1.0, Mozilla 4.0, Safari 3.0 dan Opera 10.5.

    Note :
    background-origin akan diabaikan ketika background-attachment bernilai fixed.
    Jika nilai properties ini tidak diatur dalam properties background yang diterapkan ke elemen setelah properti CSS backround-origin, maka nilai dari properti ini akan mereset ke nilai awal.
    Semoga bermanfaat ya :)






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155