Properti CSS Terkait Latar Belakang

Articles

Artikel ini menjelaskan properti CSS yang terkait dengan latar belakang.

Anda dapat mempelajari cara menjelaskan properti seperti pengaturan latar belakang, posisi, dan pengulangan.

YouTube Video

Membuat HTML untuk pratinjau

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Latar Belakang dan Dekorasi

Properti `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

Properti background-color digunakan dalam CSS untuk mengatur warna latar belakang sebuah elemen. Anda dapat menentukan warna yang ditampilkan di belakang teks dan elemen lainnya, dan warna dapat didefinisikan dalam berbagai format. Metode menentukan warna mirip dengan properti color, tetapi Anda juga dapat menentukan latar belakang yang sepenuhnya transparan menggunakan transparent.

Penjelasan:

Kelas red-example menetapkan warna latar belakang sebagai merah menggunakan kata kunci.
Kelas hex-example menetapkan warna latar belakang menggunakan kode heksadesimal.
Kelas rgb-example menetapkan warna latar belakang menggunakan format RGB.
Kelas rgba-example menetapkan warna latar belakang menggunakan format RGBA, menambahkan transparansi.
Kelas hsl-example menetapkan warna latar belakang menggunakan format HSL.
Kelas hsla-example menetapkan warna latar belakang menggunakan format HSLA, menambahkan transparansi.
Kelas transparent-example menetapkan latar belakang menjadi transparan.

Properti `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

Properti background-image digunakan untuk mengatur gambar sebagai latar belakang sebuah elemen. Gambar yang ditentukan ditampilkan sebagai latar belakang elemen, dan ukurannya, posisinya, serta metode pengulangannya dapat disesuaikan dengan properti terkait lainnya. Kami juga akan menjelaskan properti terkait seperti background-size, background-position, dan background-repeat nanti.

Penjelasan:

Kelas background-image-example menggunakan properti background-image untuk menetapkan image.jpg sebagai latar belakang. background-size: cover membuat gambar menutupi seluruh elemen, dan background-position: center memposisikan gambar di tengah. Pengulangan dinonaktifkan dengan background-repeat: no-repeat.
Kelas background-image-gradient menggunakan linear-gradient() untuk mengatur gradien latar belakang dari merah ke biru. Gradien ditampilkan dari kiri ke kanan.

Jenis Nilai yang Dapat Ditentukan

Properti background-image dapat mengambil nilai-nilai berikut.

url(): Menentukan URL dari gambar latar belakang. Sertakan file gambar dalam url(). (ex.url('image.jpg'))
none: Menentukan untuk tidak menetapkan gambar latar belakang. Ini adalah nilai default.
Gradien: Dimungkinkan juga untuk mengatur gradien sebagai gambar latar menggunakan fitur gradien CSS. (ex.linear-gradient(), radial-gradient())

Poin Penting dari Properti `background-image`

Ukuran dan posisi gambar: Ukuran dan posisi gambar latar dapat dikontrol dengan cermat dengan properti lainnya, memungkinkan penyesuaian desain. Sebagai contoh, menentukan background-size: cover memperbesar gambar untuk menutupi seluruh area, menghilangkan pemotongan.
Menggunakan Gradien: Alih-alih menggunakan gambar, Anda dapat menggunakan gradien sebagai latar belakang, menambahkan elemen dinamis ke dalam desain.

Properti `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

Properti background-position digunakan untuk menentukan posisi gambar latar dalam suatu elemen. Dengan mengontrol di mana gambar latar muncul dalam elemen, Anda dapat menciptakan tata letak yang sesuai dengan desain Anda. Nilai default adalah 0% 0%, yang menempatkan gambar di sudut kiri atas.

Penjelasan:

Kelas top-left-example menetapkan posisi gambar sebagai top left, menempatkan gambar di sudut kiri atas.
Kelas center-example menempatkan gambar di tengah menggunakan atribut center.
Kelas bottom-right-example menetapkan posisi gambar sebagai bottom right, menempatkan gambar di sudut kanan bawah.

Jenis Nilai yang Dapat Ditentukan

Properti background-position dapat mengambil jenis nilai berikut.

Kata kunci: Anda dapat menentukan left, right, top, bottom, center.
- Menentukan center akan menempatkan gambar latar di tengah elemen.
- Menentukan right akan menempatkan gambar latar di sisi kanan.
- Menentukan top left akan menempatkan gambar latar di sudut kiri atas.
- Menentukan bottom right akan menempatkan gambar latar di sudut kanan bawah.
Panjang atau persentase: Anda dapat menentukan nilai seperti 10px 20px, 50% 50%.
- Menentukan 10px 20px akan menempatkan gambar latar 10px dari kiri dan 20px dari atas.
- Menentukan 50% 50% akan memusatkan gambar latar secara horizontal dan vertikal.
Fungsi calc(): Memungkinkan penempatan yang lebih presisi menggunakan perhitungan CSS.

Properti `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

Properti background-size digunakan untuk menentukan ukuran gambar latar pada elemen. Dengan menggunakan properti ini, Anda dapat mengatur bagaimana gambar latar ditampilkan, apakah memenuhi seluruh elemen atau mempertahankan ukuran aslinya agar sesuai dengan desain. Nilai default adalah auto, yang mempertahankan ukuran asli gambar latar.

Penjelasan:

Kelas cover-example menetapkan cover. Gambar akan diperbesar untuk menutupi seluruh elemen, tetapi beberapa bagian mungkin terpotong.
Kelas contain-example menetapkan contain. Gambar akan disesuaikan agar sesuai dengan elemen, tetapi mungkin terdapat ruang kosong.
Kelas fixed-size-example menetapkan ukuran tetap untuk gambar latar belakang dengan lebar dan tinggi masing-masing 100px.

Jenis Nilai yang Dapat Ditentukan

Properti background-size dapat diberikan jenis nilai berikut.

Kata kunci
- auto: Mempertahankan ukuran default gambar (lebar dan tinggi ditentukan secara otomatis).
- cover: Menyesuaikan ukuran gambar latar untuk sepenuhnya menutupi elemen. Ini akan mengisi seluruh elemen, tetapi bagian dari gambar mungkin terpotong.
- contain: Menyesuaikan gambar agar sesuai di dalam elemen, tetapi tidak menutupi seluruh elemen. Rasio aspek gambar tetap terjaga.
Nilai numerik (px, %, em, dll.)
- Lebar dan Tinggi: Tentukan lebar dan tinggi secara eksplisit. Jika hanya satu nilai yang ditentukan, itu berlaku untuk lebar, dan tinggi akan disesuaikan secara otomatis.
- Persentase: Tentukan ukuran gambar latar sebagai persentase dari ukuran elemen. Sebagai contoh, 50% 50% mengatur gambar menjadi setengah lebar dan tinggi elemen.

Properti `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

Properti background-repeat digunakan untuk mengontrol bagaimana gambar latar belakang sebuah elemen diulang. Secara default, gambar latar belakang diulang secara horizontal dan vertikal dalam elemen, tetapi Anda dapat mengkustomisasi perilaku pengulangannya menggunakan properti ini.

Penjelasan:

Kelas repeat-example menampilkan gambar berulang baik secara vertikal maupun horizontal.
Kelas repeat-x-example menampilkan gambar berulang hanya secara horizontal.
Kelas no-repeat-example menampilkan gambar hanya sekali tanpa pengulangan.
Kelas space-example mengatur gambar latar belakang secara merata dengan jarak yang sama di antara mereka.
Kelas round-example secara otomatis mengubah ukuran gambar latar belakang agar berulang dan mengisi seluruh elemen.

Nilai-nilai yang dapat ditentukan

Properti background-repeat dapat diberikan jenis nilai berikut.

repeat: Gambar latar belakang diulang baik sepanjang sumbu X (horizontal) maupun sumbu Y (vertikal). Ini adalah nilai default.
repeat-x: Gambar latar belakang diulang hanya sepanjang sumbu X (horizontal).
repeat-y: Gambar latar belakang diulang hanya sepanjang sumbu Y (vertikal).
no-repeat: Gambar latar belakang tidak diulang dan hanya ditampilkan satu kali.
space: Gambar latar belakang diulang pada interval yang teratur, dengan jarak yang sama di antara mereka.
round: Gambar latar belakang diulang, tetapi ukurannya disesuaikan untuk memenuhi seluruh elemen. Gambar mungkin akan diubah ukurannya.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS yang terkait dengan model kotak Properti CSS yang terkait dengan dekorasi model kotak

Properti CSS Terkait Latar Belakang

YouTube Video

Membuat HTML untuk pratinjau

Latar Belakang dan Dekorasi

Properti background-color

Penjelasan:

Properti background-image

Penjelasan:

Jenis Nilai yang Dapat Ditentukan

Poin Penting dari Properti background-image

Properti background-position

Penjelasan:

Jenis Nilai yang Dapat Ditentukan

Properti background-size

Penjelasan:

Jenis Nilai yang Dapat Ditentukan

Properti background-repeat

Penjelasan:

Nilai-nilai yang dapat ditentukan

YouTube Video

Properti `background-color`

Properti `background-image`

Poin Penting dari Properti `background-image`

Properti `background-position`

Properti `background-size`

Properti `background-repeat`