Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Fitur Property Background Dalam CSS3

Properti background yang akan saya bahas disini adalah 4 properti baru yang ada pada CSS3. Langsung saja kita bahas satu-persatunya. Anda bisa melihat demonya di halaman Properti Background CSS3 atau di setiap elemen tulisan ini.

Demo Background CSS3

Properti Background Origin

Background origin ini digunakan untuk memberikan background sesuai dengan penempatannya. CSS3 dapat menggunakan beberapa background untuk satu elemen.

Demo Background Origin

Properti Background Clip

Properti Background Clip ini digunakan untuk menentukan apakah background meluas ke perbatasan atau tidak. Defaultnya adalah perbatasan pada kotak yang berarti tidak memperpanjang kedalamnya.

Demo Background Clip

Properti Background Size

Background Size adalah properti CSS3 yang berfungsi mengatur ukuran, baik width maupun height background-image. Jadi dengan adanya fitur background-size, kita perlu merubah ukuran gambar ketika ingin menampilkan background dengan gambar yang kecil.

Demo Background Size

Properti Multiple Background

Fitur ini yang sangat menarik karena kita bisa menggunakan banyak gambar menjadi background dalam satu elemen.

Demo Background Multiple

Kode HTML5 & CSS3 yang dibuatnya bisa anda pelajari dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Property Background CSS3</title>
<style type="text/css">
body {
    background: #eee;
   font-size: 1.3em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
    padding: 100px 0;
}
h1, p {
   text-align: center;
}
a, a:hover, a:link, a:active {
  color: #000;
    text-decoration: none;
}
#origin {
    border: 10px solid #111;
    -moz-border-top-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
    -moz-border-right-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
  -moz-border-bottom-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
 -moz-border-left-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
   border-radius: 7px;
 padding: 10px;

  background-image: url(gambar/tanya.png);
    background-size: 55px;
  background-repeat: no-repeat;
   background-position: right;
 /* Background Origin */
 background-origin: border-box;
}
#clip {
  border: 10px solid #111;
    -moz-border-top-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
    -moz-border-right-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
  -moz-border-bottom-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
 -moz-border-left-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
   border-radius: 7px;
 padding: 10px 10px 10px 60px;

   background-image: url(gambar/tanya.png);
    background-size: 55px;
  background-repeat: no-repeat;
   background-position: left;
  /* Background Clip */
   background-clip: border-box;
}
#size {
    border: 10px solid #111;
    -moz-border-top-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
    -moz-border-right-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
  -moz-border-bottom-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
 -moz-border-left-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
   border-radius: 7px;
 padding: 10px 10px 10px 40px;

   background-repeat: no-repeat;
   background-position: left;
  background-clip: border-box;
    background-image: url(gambar/tanya.png);
    /* Background Size */
   background-size: 35px;
}
#multiple {
  border: 10px solid #111;
    -moz-border-top-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
    -moz-border-right-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
  -moz-border-bottom-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
 -moz-border-left-colors: #333 #333 #fff #eee #ccc #fcf #ded #ede;
   border-radius: 7px;
 padding: 10px;

  background-size: 35px;
  background-repeat: no-repeat;
   background-clip: border-box;
    background-position: right;
 /* Background Multiple */
   background-image: url(gambar/tanya.png), url(gambar/jawab.png);
}
</style>
</head>
<body>
<article class="utama">
<h1>Demo : Property Background Origin</h1>
<section id="origin">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<h1>Demo : Property Background Origin</h1>
<section id="clip">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<h1>Demo : Property Background Origin</h1>
<section id="size">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<h1>Demo : Property Background Origin</h1>
<section id="multiple">Ini bukan artikel, Tulisan ini dibuat hanya sebagai contoh dalam beberapa tutorial saja.</section>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/11/fitur-property-background-dalam-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>

Kemudian simpan dengan nama background-css3.html & jalankan di web browser anda.

14 Comments

  1. Index ApkReply

    wah, ternyata diblog ini tutorialnya lengkap banget,,,
    makasih mas, atas sharingnya..
    sya emang baru belajar java, css ama html

    • Nurul ImamReply

      Sipppp… Lanjutkan belajarnya mas :)
      Semangat ;)

  2. Dwi alfinaReply

    saya ngehh banget klo udh ngebahas script2 kyak gini, gak ngerti :D newbie akut sih soalnya..

    • Nurul ImamReply

      Yah ntar lama-lama tambah puyeng mampir kesini :D

  3. RirinReply

    wah keren mas background properties nya. Saya sudah melihat demo nya :)
    tapi kok hanya berupa tulisan ya hmmm aneh deh :)

    • Nurul ImamReply

      Coba deh perhatiin tanda tanya itu, itu gambar lho mbak :D

  4. RirinReply

    wah ternyata foto saya udah muncul di kotak komentar. Horeee hehehe ^^

    • Nurul ImamReply

      Horeeeee muah…. muahhh…. :D

  5. AsalasahReply

    Iya mas.. seperti mba ririn, demonya cuma tampil tulisan aja.. jadinya kurang mengerti, apa mungkin memang begitu aja?

    • Nurul ImamReply

      Coba deh klik kanan pada tanda tanya yang ada didemo, itu gambar lho ;)

  6. Riio AlkatiryReply

    Mas pinter banget yah masalah pemograman, mas jurusan TI kah ??
    saya kuliah jurusan TI masih pemula baru masuk tahun sekarang dan masih semester 1, saya mssih awam mengenai pemograman, tapi saya punya tekad yg kuat ingin bisa menguasai bahsa pemograman, tolong dong mas kasih solusinya gimana ya supaaya saya bisa dengan mudah mempeljari bahasa pemograman heheheee :D

    • Nurul ImamReply

      Cukup fokus ke bahasa pemrograman yang mudah dulu seperti Pascal atau PHP untuk web.
      Sering buka web tutorial, baca, dan tulis manual kodenya biar bisa diperhatiin dan dihafal syntaxnya.
      Itu aja sih yang saya terapin, semoga bisa tercapai mas :)

  7. aldhi khekweReply

    Mantap deh, Mas Nurul Imam (y)

    • Nurul ImamReply

      Sippppp….

Leave a Reply

Your email address will not be published. Required fields are marked *

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