Selamat Datang

Membuat website full background

Saat ini teknik mendesain website sangat beragam, salah satu yang digemari para desainer yaitu membuat sebuah gambar menjadi background yang full satu halaman. Gambar full background akan menciptakan efek elegan pada website, tentunya harus didukung dengan pemilihan gambar yang bagus, jenis dan warna font yang dipakai juga menentukan.

Bagaimana cara membuat halaman website full background tersebut,  tidak terlalu sulit, pada tulisan ini wakaka design akan memberikan potongan kode yang berguna untuk membuat sebuah gambar menjadi full background.

Kita akan memanfaatkan fungsi css bernama Background-size.

Inti dari membuat website full background adalah menggunakan potongan kode seperti ini, bisa diterapkan di tag html, atau body.

html{
	background: url(img/bromo.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Mulai dengan memilih gambar

Oke mari kita mulai dengan memilih gambar yang tepat, pada tulisan ini kami menggunakan gambar dari Daniele Parisi

Gunung Bromo

Gunung Bromo

Membuat Struktur HTML

Pada tulisan ini kita akan menggunakan 2 buah Font yang akan kita embed dari Google Web Fonts, yaitu

Oleh Script dan Open Sand

Rancangan struktur yang akan kita buat terdiri dari
header, untuk menempatkan judul website.
content, untuk menuliskan isi dari website.
footer, untuk menuliskan hak cipta dan sumber.

berikut ini kode selengkapnya

	<div class="container">

		<div class="header">
			<h1 class="brand">Mount Bromo</h1>
			<span class="red">East Java,</span> <span class="white">Indonesia</span>
		</div>

		<div class="content">
			<p>Mount Bromo (Indonesian: Gunung Bromo), is an active volcano and part of the Tengger massif, in East Java, Indonesia. At 2,329 metres (7,641 ft) it is not the highest peak of the massif, but is the most well known. The massif area is one of the most visited tourist attractions in East Java, Indonesia. The volcano belongs to the Bromo Tengger Semeru National Park. The name of Bromo derived from Javanese pronunciation of Brahma, the Hindu creator god.</p>
			<p>Mount Bromo sits in the middle of a vast plain called the "Sea of Sand" (Javanese: Segara Wedi or Indonesian: Lautan Pasir), a protected nature reserve since 1919. The typical way to visit Mount Bromo is from the nearby mountain village of Cemoro Lawang. From there it is possible to walk to the volcano in about 45 minutes, but it is also possible to take an organised jeep tour, which includes a stop at the viewpoint on Mount Penanjakan (2,770 m or 9,088 ft) (Indonesian: Gunung Penanjakan). The best views from Mount Bromo to the Sand Sea below and the surrounding volcanoes are at sunrise. The viewpoint on Mount Penanjakan can also be reached on foot in about two hours. From inside the caldera, sulfur is collected by workers <a href="http://en.wikipedia.org/wiki/Mount_Bromo">Read More</a></p>
		</div>

		<div class="footer">
			<div class="footer-left">Designed by <a href="http://tutorial-webdesign.com">Wakaka Design</a> | back to <a href="#">tutorial</a></div>
			<div class="footer-right">Image By <a href="http://www.flickr.com/photos/daniele_parisi/2825831148/sizes/o/in/photostream/">Daniele Parisi</a></div>
		</div>

	</div>

Code CSS

*{padding:0;margin:0}
html{
	background: url(img/bromo.jpg) no-repeat center center fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	font-family: 'Open Sans', sans-serif;
	font-size:13px;
	text-shadow: 0px 1px 2px #000;
}
a{color:#999;text-decoration:none}
a:hover{border-bottom:1px solid #999}
.header{
	padding:8% 2%;
	font-size:24px;
	text-shadow: 0px 1px 0px #333;
}
	h1.brand{
		font-size:50px;
		font-family: 'Oleo Script', cursive;
		text-shadow: 0px 2px 3px #f4f4f4;
	}
	.header span.red{color:#f20000;}
	.header span.white{color:#fff;}

.content{padding:2%;color:#f4f4f4;}
.content p{margin:10px 0}
.footer{
	padding:5% 2%;
	width:95%;
	position:absolute;
	overflow:hidden;
	color:#f4f4f4;
}
	.footer-left{
		position:relative;
		width:45%;
		float:left;
	}
	.footer-right{
		text-align:right;
		position:relative;
		width:45%;
		float:right;
	}

Demo | Download

Sekian tutorial kali ini, silahkan tuliskan jika ada masukan atau pertanyaan.

Terima kasih, salam web design indonesia :D





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

27 thoughts on “Membuat website full background

  1. lestari says:

    kjguyer

  2. rena says:

    good bang, sangat membantu

  3. itu ukuran gambarnya harus seukuran layar yaa??

  4. elda says:

    kakaa mau nanya itu css3 ya kaa?

  5. Fahmi says:

    Cara masang cs gmana? apakah di sisipkan di index ? maklum newbie

  6. Fahmi says:

    css maksudnya

  7. Terima kasih informasinya, saya coba dulu untuk membuat background pada blogku.

  8. svozduh2013 says:

    nice tutorial… tapi background gambar full size bisa memperlambat loading website ya…

  9. erwin says:

    mau tanya file css itu kalo mau dipanggil misalnya mau di jadikn bground itu tempat coding ny di ato ??

  10. allianz says:

    kalau menambahkan daftar baca disebelah paling kiri, gimana ya gan???

  11. maz bidin says:

    klw setiap d reload atau keluar trus buka web.x lg sudah berganti gambar itu script.x gmna,?

  12. hadiid says:

    background: url(img/bromo.jpg) no-repeat center center

    di script di atas cara manggil gambarnya itu gambar harus di upload dulu ato ditaro di folder tertentu ya?

  13. […] Artikel Terkait: Membuat Website Full Background […]

  14. daniel says:

    min mau tanya , kamu setiap buat css pasti ada kode ini >>>
    *{padding:0;margin:0}

    itu tuh kegunaanya apa? ngaruhnya yah ? saya nyari di sini ga ketemu :D mohon maaf saya masih noob

  15. […] Anda bisa mengikuti tutorial Membuat Website Full Background disini. […]

  16. Muhammad Keenan says:

    maaf gan mau tanya, kalo yang dibuat full background itu canvas scriptnya css gimana ya ?

  17. Tio says:

    Lumayan menguras pemahaman lagi mengenai CSS.

  18. Cto Net says:

    Pingin banget nang namanya bisa CSS….
    apa bisa semua skrip jadi CSS yah… ?

  19. dhimas says:

    step step pembuatannya bagaimana gan? bisa wi wp kan? mohon pencerahannya. (newbe)

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development