Mengganti Background Gambar Responsive Fullscreen

Mengganti Background Gambar Responsive Fullscreen - Mengganti, Membuat atau mengubah tampilan background blog dengan gambar seperti pembahasan kali ini, dikarenakan sudah banyak yang membahas hal yang sama tentang tampilan gambar background pada blog, mungkin bisa dikatakan tutorial ini sudah telat untuk dipublikasikan kepada sahabat semua pecinta SAHABAT BLOGGER 77, hehe...!! namun agar tampilan gambar sedikit berbeda, saya menyisipkan kode @media-screen (fullscreen image) sehingga tampilan gambar akan responsive dengan style fullscreen.

Agar gambar pada background dapat berubah atau saling berganti, sebagai contoh saya menggunakan 6 model gambar pada tampilan DEMO SHOW dengan style yang berbeda, sehingga gambar pada background akan tampil dengan style slideshow dengan tampilan efek left-rotate. Pembentukan CSS berikut saya desain dengan menggabungkan beberapa efek animasi yang saya kutip pada link sumber berikut -
Efek Gambar pada link - Efek Slide Show Otomatis Pada Gambar
Efek Text title pada link - Membuat Efek CSS Animasi Pada Tulisan




DEMO SHOW

*//
css design by. Devy Indriyani
web URL: http://sahabatblogger77.blogspot.com
kode design input: sb77 [sahabat blogger 77]
ex-date: may 09, 2014 //*
.sb77-imageshow,
.sb77-imageshow:after {
   position: fixed;
   width: 100%;height: 100%;
   top: 0px;left: 0px;z-index: 0;}

.sb77-imageshow li span {
   width: 100%;height: 100%;
   position: absolute;
   top: 0px;left: 0px;
   color: transparent;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: none;
   opacity: 0;z-index: 0;
   -webkit-backface-visibility: hidden;
   -webkit-animation: imageAnimation 36s linear infinite 0s;
   -moz-animation: imageAnimation 36s linear infinite 0s;
   -o-animation: imageAnimation 36s linear infinite 0s;
   -ms-animation: imageAnimation 36s linear infinite 0s;
   animation: imageAnimation 36s linear infinite 0s;}

.sb77-imageshow li div {
   z-index: 1000;
   position: absolute;
   bottom: 10px;left: 0px;width: 100%;
   text-align: right;opacity: 0;
   -webkit-animation: titleAnimation 36s linear infinite 0s;
   -moz-animation: titleAnimation 36s linear infinite 0s;
   -o-animation: titleAnimation 36s linear infinite 0s;
   -ms-animation: titleAnimation 36s linear infinite 0s;
   animation: titleAnimation 36s linear infinite 0s;}

.sb77-imageshow li div h3 {
   font-family: 'BebasNeueRegular', Arial, sans-serif;
   font-size: 100px;padding: 0 85px;
   line-height: 100px;
   color: rgba(169,3,41, 0.8);}

.sb77-imageshow li:nth-child(1) span {
   background-image: url(http://Gambar(1).jpg)}

.sb77-imageshow li:nth-child(2) span {
   background-image: url(http://Gambar(2).jpg);
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;}

.sb77-imageshow li:nth-child(3) span {
   background-image: url(http://Gambar(3).jpg);
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;}

.sb77-imageshow li:nth-child(2) div {
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;}

.sb77-imageshow li:nth-child(3) div {
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;}

.no-cssanimations .sb77-imageshow li span{opacity: 1;}
@media screen and (max-width: 1140px) {
 .sb77-imageshow li div h3 { font-size: 100px }}
@media screen and (max-width: 600px) {
 .sb77-imageshow li div h3 { font-size: 50px }}

CSS diatas hanya untuk menampilkan gambar dengan 3 model saja, jika Anda ingin membuat gambar lebih banyak lagi, cukup tambahkan kode li:nth-child(4) span {...}, untuk gambar berikutnya dengan animation-delay selisih 6s,12s,18s..dan seterusnya, sedangkan pada text title CSS pengaturan pada li:nth-child(4) div {...}.
Selanjutnya pembentukan kode pemanggil HTML sebagai berikut:

<ul class="sb77-imageshow">
   <li><span>Image 01</span>
     <div><h3>
      ... //Teks Anda</h3>
     </div>
   </li>
   <li><span>Image 02</span>
     <div>
     ...//Lanjutkan Pada Gambar 02
     </div>
   </li>
....//Dan Seterusnya..
</ul>

Bagaimana..? Anda tertarik ingin mencoba.! hehe..
Semoga dengan sekian lama saya tidak up-date artikel, tutorial kali ini dapat membantu menumbuhkan inspirasi Anda dalam berkarya. Terimakasih, SUCCESS ALWAYS FOR YOU..!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengganti Background Gambar Responsive Fullscreen
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/05/mengganti-background-gambar-responsive-fullscreen.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77