Tutorial CSS, Membuat Background Website dengan CSS Image

Apa hal pertama yang Anda pikirkan ketika akan mengatur layout website dengan CSS? Yups benar, Pikiran Anda sama dengan saya *Tanya sendiri, Jawab sendiri :D, Penulis Blog yang aneh :D.
Memberikan Warna / Gambar pada background adalah hal pertama yang saya pikirkan pada pengaturan tag. Untuk pemberian warna pasti pembaca sekalian sudah tahu property background-color bukan? Jadi kita ga perlu bahas detail lagi y, kita langsung pada pemberian gambar untuk background saja. Dalam memberikan bakground gambar kita menggunakan property CSS Image seperti background-image, background-repeat atau background-position jika dibutuhkan.

Ada beberapa teknik pemberian Gambar pada background, ada yang diperbesar selebar browser, ada yang di repeat/diulang berdasarkan sumbu x atau sumbu y

Oke kita buat file HTML dengan methode penyisipan CSS (internal CSS) pada teks Editor. Jangan lupa disimpan dengan nama background-repeat.html ya. Oh y, hampir saya lupa nanti untuk gambarnya bisa di download pada file yang saya sertakan pada link download.

Berikut adalah screenshots image / gambar yang akan kita gunakan untuk latihan,

Oke langsung saja ketik script berikut :


<html>

<head>

<style>

    body {

            background-image : url("images/back.png");

            background-image : repeat;

            background-color : #ffffff;

    }

</style>

</head>

<body>

</body>

</html>

Hasilnya dapat Anda lihat pada gambar di bawah ini :

Untuk CSS-Shorthand nya adalah :


body {

            background: url(images/back.png) repeat #fff;

    }

Untuk latihan berikutnya, kita akan coba dengan property repeat-x

background-repeat-x.html


<html>

<head>

<style>

    body {

            background: url(images/bg-body.jpg) repeat-x #fff;

    }

</style>

</head>

<body>

</body>

</html>

Hasilnya dapat dilihat pada screenshots berikut ya :

Dan latihan berikutnya , Kita beri nama background-repeat-y.html, tapi penerapannya pada div#wrapper ya, teknik ini dulu sering saya lakukan dikarenakan pada saat itu belum ada property box-shadow, jadi buat bayangannya dari image/ gambar.


<html>

<head>

<style>

    body {

        padding :0px;

        margin : 0px;

        background-color : #9ad6bd;

    }

    

    #wrapper {

        background-image:url(images/back.jpg);

        background-repeat:repeat-y;

        width:800px;

        height : 700px;

        margin-right:auto;

        margin-left:auto;

    }

</style>

</head>

<body>

<div id="wrapper">

</div>

</body>

</html>

Hasilnya dapat dilihat pada screenshots berikut :

Yang terakhir kebutuhannya sedikit berbeda kita akan memberikan gambar besar pada website. Buat blur supaya ga tabrak-tabrakan desainnya :-)

Pada kesempatan kali ini kita coba dengan cara External CSS, oke.. Yakni pemisahan antara file HTML dan CSS

Untuk file HTML silahkan Anda simpan dengan bakcground.html


<html>

<head>

<link rel="stylesheet" href="style.css" />

</head>

<body>

    <img src="images/bg1.jpg" class="bg" alt="" />

</body>

</html>

Dan untuk File CSS silahkan simpan dengan nama style.css


body {

    background: #8E8E8E;

    color: #666;

}



img.bg {

    display: block;

    min-height: 100%;

    min-width: 1024px;

    width: 100%;

    height: auto;

    position: fixed;

    top: 0;

    left: 0;

}

Dan hasilnya gambar akan memenuhi Browser Anda :

Berikut Link Gambar background : Link Download

Semoga Bermanfaat

Tutorial CSS, Membuat Background Website dengan CSS Image

0 Response to " Tutorial CSS, Membuat Background Website dengan CSS Image"

Post a Comment