8.5.14
10
Background responsive fullscreen image

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 >>
= TERIMA KASIH =

10 komentar

  1. pertamak saya ambil dulu nih mbak

    BalasHapus
    Balasan
    1. hehe...silahkan diangkut mas,,

      Hapus
  2. dapat tutor baru nih,, thanks gan

    BalasHapus
  3. wah pertamax nya sudah diambil orang hehe tapi tidak apa-apa deh . Oh ya saya sudah lihat demo nya cukup bagus sist thank ya sudah berbagi ^^

    BalasHapus
  4. keren banget bos...sepertinya backround gambar responsive menarik juga dipasang diblog yia bos, hehehe....

    BalasHapus
  5. Gimana masalah loadingnya nih sob, memberatkan gk...???

    BalasHapus
  6. ini anag makan ap sih..!,,

    BalasHapus
  7. cara meletakkannya di blog gmn mbak ??

    BalasHapus
  8. nah tuh backgroundnya cantik dev...sapa sih yang kemarin bikin cewek satu ini jadi merana, buata kali ya tuh orang....heeee

    BalasHapus
    Balasan
    1. Devy juga kan manusia mbah, yang bisa juga terluka dan merana kalau disakiti, hehe..!!

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK