Membuat Background image page Dynamic with responsive

Ini cuma catatan kecil yang di catat di blog agar saya jika terlupakan tinggal melihat disini

untuk membuat Background image page Dynamic with responsive

untuk contohnya  langsung kita bahas dibawah ini

jika tampilan dengan ukuran pixel besar seperti di bawah ini

login1

dan untuk ukuran pixel kecil akan menjadi seperti dibawah

login2

syaratnya adalah ukuran gambarnya yg besar.

dan tambahan style seperti dibawah ini :

html { 
 background-color: transparent;
 background: url(<?php echo base_url('assets/images/blabla.jpg') ?>) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body{
	
 background-color: transparent;
	}

tinggal ganti url nya, diatas adalah contoh tambahan untuk yg memakai PHP dengan CodeIgniter Web Framework

jika ingin lebih ringan adalah meng custom @media screen di css nya, silahkan ber explorer kawan.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s