Background image pada text field | tentangrifai-dotcom

24 Aug

Background image pada text field

Posteds by admin in Tentang Website

tags: css, html

Artikel berikut menjelaskan cara simple untuk membuat custom text-field dengan menggunakan image backround dari css.. hasil yang akan kita dapatkan kira2x seperti contoh dibawah ini :

sebelum memulainya silakan anda download gambar berikut yang saya jadikan contoh… atau anda dapat memilih contoh lain yang anda miliki…

selanjutnya siapkan sebuah halaman html lalu masukan skript css ini pada halaman html anda diantara tags <head></head>

<style>
.box{
background-image:url(’user_add.png’) ;
background-repeat:no-repeat;
padding-left:40px;
height:35px;
font-size:25px;
}
</style>

kemudian di dalam tags <body> masukkan html code untuk membuat text-field dengan class .box yang sudah kita buat sebelumnya :

<input name=”search” type=”text” class=”box” size=”10″ />

Done !! , yang mungkin harus anda perhatikan adalah atribut dari css : background-image:url(’user_add.png’); yang merujuk pada nama file & path gambar anda disimpan bersamaan dengan file html anda … silakan anda sesuaikan/variasikan tampilan yang anda kehendaki sesuai dengan posisi yang pas dengan file background yang anda miliki pada atribut css : padding-left:40px; height:35px; font-size:25px;