Membuat Website Full dengan Background Image

full-screen-backgrounds-11

Oke teman-teman WebHozz, kali ini kita akan mencoba bagaimana membuat background sebuah website menjadi terlihat full satu halaman. Baik kita akan mencobanya.

Yang kita perlukan untuk memanipulasi tampilan background agar terlihat full adalah dengan perintah css seperti dibawah ini teman-teman.

background: url("309212-Berserker.jpg")no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

Teman-teman buatlah HTMLnya seperti berikut ini:

</pre>
<pre><div class="wrapper">
        <div class="header">
            <h1 class="tittle">Mustang</h1>
            <span class="subtittle"><i>American Muscle Car</i></span>
        </div><!--end of header-->

        <div class="content">
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div><!--end of content-->

        <div class="footer">
            <div class="footerL">
                Design by <a href="http://www.webhozz.com"> WebHozz</a>
            </div><!--end of footerL-->
        </div><!--end of footer-->
</div>><!--end of wrapper--></pre>
<pre>

Jangan lupa teman-teman untuk menggabungkannya dengan CSS yang sudah kita buat tadi, kalian bisa memodifikasi sesuai dengan kebutuhan teman-teman.
Di bawah sudah saya berikan source nya, Oke selamat mencoba.

DEMO