Jan 12, 2016

Membuat Background Dengan CSS

by  0

Membuat background dengan CSS



Background merupakan elemen yang menyenangkan untuk membuat tampilan lebih menarik. 

Kita juga dapat bermain-main dengan background dengan CSS.

Membuat background dengan CSS bisa dilakukan dengan
  1. Property background-color.
    Dilihat dari nama propertynya kita bisa memberikan nilai warna dalam nama warna,
  2.  code warna atau rgb
  3. Property background-image
    Dilihat dari namanya kita dapat memberikan image sebagai background. 
    Property yang berhubungan dengan background-image ini adalah:
    - property background-position yang menunjukkan di mana background akan diletakkan
    - property background-repeat yang akan mengulang pemakaian background
Untuk lebih jelasnya kita akan membuat background-color, background-image dengan repeat-x 
untuk bg1.gif, dan background-image untuk repeat-y untuk bg2.
Coding secara lengkap adalah sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Background</title>
<style type="text/css">
#bungkus
{
     padding-top: 20px;
     width: 500px;
     height: 800px;
     background-color: #272727;
     margin-left: auto;
     margin-right: auto;
}
#judul
{
     width: 460px;
     height: 19px;
     padding: 3px;
     margin-left: auto;
     margin-right: auto;
     color: white;
     background-image: url('bg1.gif');
     background-position: left top;
     background-repeat: repeat-x;
}
#isi
{
     width: 460px;
     height: auto ;
     padding: 3px;
     margin-top: 20px;
     margin-left: auto;
     margin-right: auto;
     color: white;
     background-image: url('bg2.gif');
     background-position: left top;
     background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="bungkus">
<div id="judul">How great Thou art</div>
<div id="isi">Oh Lord my God
     <br/>When I in awesome wonder
     <br/>Consider all the worlds
     <br/>Thy hands have made
     <br/>I see the stars
     <br/>I hear the rolling thunder
     <br/>Thy power throughout
     <br/>The universe displayed
     <br/>
     <br/>Then sings my soul
     <br/>My Savior, God, to Thee
     <br/>How great thou art
     <br/>How great thou art
     <br/>Then sings my soul
     <br/>My Savior, God, to Thee
     <br/>How great Thou art
     <br/>How great Thou art
</div>
</div>
</body>
</html>
Hasilnya dapat dilihat di http://aris.proweb.asia/background.html dengan tampilan seperti gambar 
di bawah ini:

0 komentar:

Post a Comment