Properti yang dapat digunakan pada css background

Question

Example

Specify the size of a background-image with "auto" and in pixels:

Table of Contents Show

Definition and Usage
Browser Support
Property Values
More Examples
Related Pages
Mengenal Beberapa Macam Property Background dan Nilai Yang Bisa Digunakan Padanya
Background-color
Background-image
Properti apa yang digunakan untuk latar belakang warna pada CSS?
Properti CSS apa saja?
Apa itu background image?
Apa itu background repeat?

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

CSS Syntax

Property Values

Value	Description	Demo
auto	Default value. The background image is displayed in its original size	Demo ❯
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units	Demo ❯
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"	Demo ❯
cover	Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges	Demo ❯
contain	Resize the background image to make sure the image is fully visible	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify the size of a background image with percent:

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

Try it Yourself »

Example

Specify the size of a background image with "cover":

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Try it Yourself »

Example

Specify the size of a background image with "contain":

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}

Try it Yourself »

Example

Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover":

#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}

Try it Yourself »

Example

Use different background properties to create a "hero" image:

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

Try it Yourself »

CSS tutorial: CSS Backgrounds

HTML DOM reference: backgroundSize property

belajar menggunakan property background pada CSS

Pada tutorial sebelumnya kita telah belajar tentang property color pada CSS dan juga nilai apa saja yang bisa digunakan padanya.

Dan pada kesempatan kali ini kita akan belajar tentang property background pada CSS dan cara menggunakannya.

Secara umum, property background pada CSS berfungsi untuk memberi dan mengatur tampilan latarbelakang atau background pada sebuah Tag atau Element HTML.

Jika anda memperhatikan dengan baik kode yang saya tulis pada tutorial-tutorial sebelumnya, disitu saya sangat sering menggunakan property background-color yang mana properti background-color ini merupakan salah satu dari beberapa macam properti background yang terdapat pada kode CSS.

Di dalam CSS terdapat beberapa macam properti background yang bisa kita gunakan untuk membuat, mengatur dan memodifikasi background halaman sebuah website. Diantara property background tersebut adalah background-color, background-image, background-repeat, background-position dan background attachment.

Masing-masing property tersebut memiliki nilai yang berbeda-beda dan kita akan membahas property-property tersebut satu persatu beserta nilainya.

Sebelum kita mulai, jangan lupa untuk mempersiapkan dan memastikan teks editor dan browser anda bisa berfungsi dengan baik, kemudian buatlah sebuah folder baru didesktop anda dengan nama belajar_property_background_css untuk menyimpan file yang kita buat nanti, in sya aLLAH.

folder belajar_property_background_css

Tanpa berlama-lama lagi mari kita langsung mulai saja pembahasannya.

Mengenal Beberapa Macam Property Background dan Nilai Yang Bisa Digunakan Padanya

Background-color

Property background-color berfungsi untuk memberikan warna latarbelakang atau warna background pada sebuah Tag atau Element HTML.

Secara asal tidak semua Tag atau Element HTML memiliki atribut untuk memberi atau mengganti warna background, akan tetapi dengan property background-color ini kita bisa membuat atau mengganti warna asal background pada Tag atau Element HTML yang mana saja yang kita inginkan.*

Dalam penggunaannya, property background-color ini memiliki beberapa macam nilai yang bisa kita gunakan padanya, diantaranya yaitu :

Warna : baik berupa Nama Warna ataupun kode-kode warna lainnya yang telah kita bahas pada tutorial sebelumnya. Nilai ini digunakan untuk memberikan warna tertentu pada sebuah Tag atau Elemnt HTML.

contoh penulisan :

background-color: nama_atau_kode_warna;

2. Initial : warna default atau warna asal. Digunakan untuk memberikan atau mengembalikan warna default dari sebuah Tag atau Element HTML.

contoh penulisan :

background-color: initial;

3. Inherit : warna turunan. Digunakan untuk memberikan warna yang sama dengan warna dengan warna Tag atau Element HTML yang memuatnya

background-color: inherit;

4. Tranparent : warna transparan. Digunakan untuk memberikan warna transparan pada sebuah Tag atau Element HTML.

background-color: transparent;

Untuk contoh penerapannya silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini:

<html>
<head>
<title>Belajar Menggunakan Property background-color</title>
</head>
<body>
<style>

body {
    background-color: teal;
}

td {
    font-size : 30px;
    text-align : center;
    color : #000000;
    font-weight : bold;
}

.merah {
    background-color : red;
}
.hijau {
    background-color : #00ff00;
}
.biru {
    background-color : rgb(0,0,255);
}
.kuning {
    background-color : #ffff00;
}
.ungu {
    background-color : purple;
}

</style>

</head>
<body>
<table border="0" cellpadding="80px" align="center">
    <tr>
        <td class="merah"> Merah </td>
        <td class="kuning"> kuning </td>
        <td class="hijau"> hijau </td>
        <td class="biru"> biru </td>
        <td class="ungu"> ungu </td>
    </tr>
</table>    
</body>
</html>

Kemudian simpan dengan nama background_color.html didalam folder belajar_property_background_css lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :

hasil penerapan property background-color

Untuk nilai yang lain anda bisa mencobanya sendiri dengan mengubah nilai warna menjadi nilai yang mana saja yang ingin anda coba dari ketiga nilai diatas atau anda bisa membuat file baru untuk mencobanya.

Background-image

Selain menggunakan background warna, kita juga bisa menggunakan background gambar untuk mempercantik tampilan website kita.

Dalam CSS terdapat property background-image yang berfungsi untuk memberikan tampilan bakcground berupa gambar pada sebuah website.

Sebenarnya untuk dapat mengganti gambar background sebuah website kita bisa menggunakan atribut background pada HTML, akan tetapi dengan menggunakan CSS kita akan lebih leluasa untuk mengatur background gambar tersebut dan bahkan kita bisa memberikan gambar background pada Tag atau Element HTML yang tidak memiliki atribut tersebut.

Ada beberapa macam nilai yang bisa digunakan pada property background-image ini, diantaranya :

url(nama_atau_letak_gambar) : Nilai ini berfungsi untuk mencari dan menemukan gambar yang akan kita jadikan sebagai background.

contoh penulisan :

background-image: url('nama_atau_letak_gambar');

2. Initial : Nilai ini berfungsi untuk memberikan nilai gambar background secara default.

contoh penulisan :

background-image: initial;

3. Inherit : Nilai ini digunakan untuk memberikan gambar yang sama dengan gambar pada Tag atau Element HTML yang memuatnya.

background-image: inherit;

4. none : Tanpa background. Ini adalah nilai default.

background-image: none;

Untuk mengetahui penggunaan property background-image ini mari kita buat sebuah file HTML baru. Namun sebelumnya silahkan anda klik kanan pada gambar dibawah ini lalu pilih save-as :

gambar background untuk bahan praktek

Kemudian simpan di folder belajar_background_image_css dengan nama bg.jpg.
Setelah itu silakan buka teks editor Anda lalu ketikkan atau copy paste kode dibawah ini:

<html>
<head>
<title>Belajar Menggunakan Property background-image</title>
<style>
body{
    background-image: url('bg.jpg');
    color: white;
    font-size:35px;
    text-align: center;
}
</style>
</head>
<body>
Saya sedang belajar membuat background gambar dengan property backround-image!!!
</body>
</html>

Kemudian Simpan dengan nama background_image.html lalu jalankan di browser anda maka hasilnya kira-kira seperti ini:

hasil penerapan property background-image

Untuk nilai yang lain silahkan anda coba praktekkan sendiri untuk melihat hasilnya, baik dengan mengubah nilai background_image diatas atau dengan membuat sebuah file baru.

Nah, itulah tutorial mengubah tampilan background dengan CSS.

Bagaimana? Sangat mudah untuk dipahami dan dipraktekkan bukan?

Setelah kita mengerti dan telah berhasil mempraktekkan cara membuat background berupa gambar, maka selanjutnya kita akan mempelajari cara mengatur background gambar tersebut dengan beberapa property lain yaitu property background-repeat, background-position dan background-attachment.

Penasaran dengan ketiga property tersebut? langsung saja klik disini untuk membaca tutorialnya

Semoga bermanfaat.

Properti apa yang digunakan untuk latar belakang warna pada CSS?

2. Background-Color Sesuai dengan namanya, Properti background-color pada CSS merupakan properti yang bisa Anda gunakan khusus untuk mengatur pewarnaaan dari suatu latar belakang pada selector(elemen html).

Properti CSS apa saja?

Terdapat 4 properti css antara lain: list-style-type, list-style-position, list-style-image, dan list-style.

Apa itu background image?

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

Apa itu background repeat?

Background repeat Properti background-repeat berfungsi untuk mengatur apakah background image yang kita terapkan akan ditampilkan secara berulang atau hanya sekali atau satu buah gambar saja.