Farih.co.id
Home Programming 7 Properti Latar Belakang CSS untuk Meramaikan Desain Web Anda

7 Properti Latar Belakang CSS untuk Meramaikan Desain Web Anda

water splash

Tema latar belakang situs web Anda dapat memengaruhi tampilan dan nuansanya secara signifikan. Warna, gambar, dan pola latar belakang memunculkan emosi dan menciptakan pengalaman pengguna yang luar biasa.


Anda dapat menggunakan properti latar belakang CSS untuk mengatur gaya latar belakang elemen HTML. Pelajari semua tentang beberapa properti CSS yang dapat Anda gunakan untuk membuat latar belakang yang luar biasa.


1. warna latar belakang

Properti background-color mengatur warna latar belakang suatu elemen. Anda dapat mengatur warna menggunakan nama seperti “merah”, nilai HEX seperti “#00FF00” atau nilai RGB – seperti “rgb(0, 255, 0)”. Anda juga dapat menggunakan nilai HSL untuk mengatur warna latar belakang menggunakan hue, saturation, dan lightness.

Contoh berikut menyetel warna latar belakang seluruh halaman menjadi oranye. Elemen judul masing-masing mendapatkan latar belakang yang berbeda.

 <body>
    <h2>I am Green</h2>
    <h3>I am Red</h3>
    <h4>I am Blue</h4>
</body>

Menggunakan CSS, Anda dapat menerapkan warna latar belakang yang unik untuk setiap elemen:

 body {
    background-color: orange;
}

h2 {
    background-color: #006600;
}

h3 {
   background-color: rgb(128, 0, 0);
}

h4{
   background-color: hsl(240, 100%, 50%);
}

Ini akan menata halaman agar terlihat seperti:

background color property chnages background

Anda dapat menggunakan properti opacity untuk menentukan transparansi suatu elemen. Opacity mengambil nilai antara 0,0 dan 1,0. Semakin rendah nilainya, semakin transparan elemen tersebut.

Sebagai contoh, coba atur opacity elemen body menjadi 0,5:

 body {
    background-color:orange;
    opacity:0.5;
}

Ini akan ditampilkan sebagai berikut — bandingkan warnanya dengan yang ada di tangkapan layar sebelumnya:

menunjukkan opasitas

2. gambar latar belakang

Properti background-image menetapkan gambar sebagai latar belakang suatu elemen. Anda dapat mereferensikan gambar lokal atau gambar dari internet.

 <body>
    <h1>Hello there!</h1>
    <p>I have an image in my background!</p>
</body>

File CSSnya:

 body {
    background-image:url("https://images.pexels.com/photos/1191710/pexels-photo-1191710.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Ini akan ditampilkan seperti ini:

properti background-image menetapkan latar belakang untuk elemen

Anda juga dapat menggunakan gradien latar belakang untuk membuat tampilan unik untuk aplikasi Anda.

3. ulangi latar belakang

Properti background-image mengulang gambar secara default. Anda dapat memilih untuk mengulang gambar secara horizontal pada sumbu x atau vertikal pada sumbu y.

Alternatifnya, jika pengulangan tidak sesuai dengan gaya Anda, Anda dapat menghapusnya menggunakan nilai no-repeat.

 <body>
    <h1>Hello There!</h1>
    <h3>I am demonstrating the repeat background-repeat property on the x-axis!</h3>
</body>

Gunakan CSS berikut untuk menerapkan latar belakang berulang di sepanjang sumbu x:

 body {
    background-image: url("https://images.pexels.com/photos/459335/pexels-photo-459335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-repeat: repeat-x;
}

Hasil:

properti background-repeat pada sumbu x

Selanjutnya, coba ulangi gambar pada sumbu y:

 body {
   background-image:url("https://cdn.pixabay.com/photo/2016/04/18/22/05/seashells-1337565__340.jpg");
   background-repeat:repeat-y;
}

Hasil:

properti background-repeat pada sumbu y

Contoh pada sumbu y tentu terlihat terdistorsi. Jika ini bukan pola yang Anda cari, Anda dapat menentukannya no-repeat alih-alih:

 body {
    background-image:url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-repeat:no-repeat;
}

Hasil:

mendemonstrasikan background-repeat no-repeat

4. latar belakang-posisi

Properti background-position menentukan posisi gambar latar belakang di dalam elemennya. Ini menggunakan kata kunci khusus posisi seperti tengah, atas, Dan dasaratau nilai piksel atau persentase.

Tambahkan properti background-position ke gambar terakhir:

 body {
    background-image: url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-position: top center;
}

Ini akan terlihat seperti ini:

menunjukkan pusat posisi latar belakang

Anda dapat melihat gambar mendistorsi tampilan situs web. Mari kita perbaiki dengan properti berikutnya.

5. ukuran latar belakang

Anda dapat menggunakan properti gambar latar belakang untuk menentukan ukuran gambar tertentu. Ini menggunakan kata kunci seperti menutupi Dan berisi atau piksel atau nilai persentase. Mari perbaiki gambar latar belakang yang terdistorsi dengan menambahkan properti ukuran latar belakang.

 body {
    background-image: url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-repeat: no-repeat;
   background-position: center;

Hasilnya menunjukkan bahwa gambar sekarang menutupi halaman web secara proporsional.

mendemonstrasikan properti background-size

6. lampiran latar belakang

Properti background-attachment menentukan apakah posisi gambar latar belakang tetap atau bergulir. Anda dapat menggunakan kata kunci fixed atau scroll.

Mari kita tunjukkan dalam kode berikut:

 <body>
    <h1>The background-attachment property</h1>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
    <p>With the fixed attachment property you will notice that the background does not move with the text.</p>
</body>

File CSSnya:

 body {
    background-image: url("https://images.pexels.com/photos/96627/pexels-photo-96627.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

Jika Anda bergerak ke bawah halaman, Anda akan melihat latar belakang tidak bergerak:

posisi tetap properti lampiran latar belakang

Untuk mendemonstrasikan properti scroll background-attachment, ubah kata kunci menjadi menggulir. Anda akan melihat bahwa sekarang latar belakang bergerak dengan teks.

 body {
    background-image: url("https://images.pexels.com/photos/96627/pexels-photo-96627.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
}

7. Properti Singkatan latar belakang

Anda mungkin memperhatikan bahwa Anda perlu menyertakan beberapa properti untuk mendapatkan latar belakang yang sempurna. Ini melibatkan penulisan banyak kode. Tetapi Anda dapat mempersingkat kode menggunakan properti singkatan latar belakang.

Properti steno memungkinkan Anda mengatur banyak properti latar belakang dalam satu baris. Anda menggunakan kata kunci latar belakang untuk mengatur properti steno.

Misalnya, alih-alih menulis kode seperti ini:

 body {
    background-color: green;
    background-image: url("laptop3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachement: scroll;
    background-position: center;
}

Anda dapat menulisnya dalam satu baris, seperti ini:

 body {
    background: green url("laptop3.jpg") no-repeat cover scroll center;
}

Properti steno mengikuti urutan tertentu. Anda harus menyelaraskan properti dalam urutan itu meskipun satu atau lebih tidak ada. Urutannya adalah:

  • warna latar belakang
  • gambar latar belakang
  • background-repeat
  • background-attachment
  • background-position

Anda dapat membuat desain yang menarik dengan CSS menggunakan berbagai pola latar belakang. Dengan pola ini, Anda dapat memperoleh latar belakang yang unik dan luar biasa untuk situs web Anda.

Properti Latar Belakang Lainnya di CSS

CSS sangat kuat dan ada banyak hal yang dapat Anda lakukan dengannya untuk membumbui aplikasi Anda. Anda dapat menggunakan properti seperti background-clip, background-origin, dan background-blend-mode untuk menambahkan beberapa animasi.

Anda juga dapat menggunakan gradien dan pola untuk menyesuaikan halaman Anda. Bereksperimenlah dengan properti latar belakang CSS untuk mempertajam keterampilan desain web Anda.

Comment
Share:

Leave a Reply

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

beli jitu https://167.71.217.241/ https://188.166.210.27/ https://103.253.147.8/ https://139.59.194.132/ https://152.42.192.54/ https://152.42.187.123/ https://188.166.196.248/ https://163.47.9.78/ https://157.230.245.144/ http://68.183.96.87/ http://147.182.210.122/ http://147.182.128.234/ http://167.172.1.184/ http://157.245.5.74/ http://139.59.217.59/ http://163.47.9.16/ http://144.126.251.215/ http://139.59.217.128/ http://103.186.0.254/ http://161.35.251.176/ http://157.245.29.71/ https://170.64.254.102/ https://www.markas303.ac.id/ https://www.markas303.or.id/ https://www.markas303.sch.id/ http://103.172.205.75/ http://103.245.38.119/ http://138.197.224.231/ http://138.197.224.231/

Ad

BIJI18 BIJI18 https://goremekoop.com/ AGEN77 3DBET OBOR138 GACOR168JP YING77 RUMAH258 POHONHOKI99 ASALBET88 PARIS128 66KBET LONG111 DESA333 DEWAGACOR89 YING77
https://146.190.200.68/ https://188.166.204.36/