The My Project

Beranda
CSS

CSS | BAB 7 Pengaturan Gambar

 


Properti width dan height

dalah properti CSS yang digunakan untuk mengatur lebar dan tinggi dari sebuah elemen HTML

Contoh:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>display none</title>
    <style>
      #box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="box">belajar coding by Ripal</div>
  </body>
</html>

belajar coding by Ripal

Properti background-image

Adalah properti CSS yang digunakan untuk mengatur gambar latar belakang dari sebuah elemen HTML.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-image</p>
  </body>
</html>

No repeat adalah nilai properti (background-repeat) yang digunakan untuk mengatur agar gambar latar belakang tidak diulang sama sekali. Gambar latar belakang hanya akan ditampilkan satu kali.

bila tidak menggunakan properti tambahan ( background-repeat: no-repeat; ), Outputnya akan seperti berikut (background akan otomatis repeat/diulang/pengulangan.) 

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");  
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-image</p>
  </body>
</html>

Repeat adalah properti CSS yang digunakan untuk mengatur cara gambar latar belakang diulang.
Gambar latar belakang dapat diulang secara horizontal (repeat-x), vertikal (repeat-y), atau tidak diulang sama sekali ( no-repeat).

Properti background-size

Adalah properti CSS yang digunakan untuk mengatur ukuran gambar latar belakang dari sebuah elemen HTML.

Properti ini memiliki beberapa nilai yang dapat digunakan, yaitu:

  1. auto : Ukuran gambar akan mengikuti ukuran elemen yang memiliki latar belakang gambar. 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      #example1 {
        border: 2px solid black;
        padding: 25px;
        background: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
        background-size: auto;
      }
    </style>
  </head>
  <body>
    <h2>background-size: auto:</h2>
    <div id="example1">
      <h2>belajar coding by Ripal</h2>
      <p>ini contoh pengguna background-size: auto ;</p>
    </div>
  </body>
</html>

  2. cover : Gambar akan diregangkan agar memenuhi seluruh elemen, dengan mempertahankan rasio aspeknya. 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      #example1 {
        border: 2px solid black;
        padding: 25px;
        background: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>background-size: cover:</h2>
    <div id="example1">
      <h2>belajar coding by Ripal</h2>
      <p>ini contoh pengguna background-size: cover ;</p>
    </div>
  </body>
</html>

  3. contain : Gambar akan diperkecil agar muat di elemen, dengan mempertahankan rasio aspeknya. 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      #example1 {
        border: 2px solid black;
        padding: 25px;
        background: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
        background-size: contain, cover;
      }
    </style>
  </head>
  <body>
    <h2>background-size: contain:</h2>
    <div id="example1">
      <h2>belajar coding by Ripal</h2>
      <p>ini contoh pengguna background-size: contain ;</p>
    </div>
  </body>
</html>

  4. nilai numerik : Nilai numerik ini dapat berupa satuan pixel (px), persen (%), atau viewport (vw, vh). Nilai ini akan digunakan untuk mengatur ukuran gambar secara spesifik. 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      #example1 {
        border: 2px solid black;
        padding: 25px;
        background: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      #example2 {
        border: 2px solid black;
        padding: 25px;
        background: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
        background-size: 75% 50%;
      }
    </style>
  </head>
  <body>
    <h2>background-size: 100% 100%:</h2>
    <div id="example1">
      <h2>belajar coding by Ripal</h2>
      <p>
        Ukuran gambar latar belakang diatur dalam persentase elemen induk; lebar
        100% dan tinggi 100%.
      </p>
    </div>

    <h2>background-size: 75% 50%:</h2>
    <div id="example2">
      <h2>belajar coding by Ripal</h2>
      <p>
        Ukuran gambar latar belakang diatur dalam persentase elemen induk; lebar
        75% dan tinggi 50%.
      </p>
    </div>
  </body>
</html>

Properti background-position

Adalah properti CSS yang digunakan untuk mengatur posisi gambar latar belakang dari sebuah elemen HTML.

Properti background-position dapat menerima satu atau dua nilai, yang masing-masing mewakili posisi horizontal dan vertikal dari gambar latar belakang. Nilai-nilai ini dapat berupa nilai absolut (misalnya, 10px atau 50%) atau nilai persentase (misalnya, 50% atau 25%), nilai arrow (left, right, bottom, top dan center). 

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
        background-attachment: fixed; /*properti tamabahan */
        background-position: top right;
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-position</p>
  </body>
</html>

Dalam mengatur properti background-position, perlunya menambahkan/menyisipkan properti tmabahan ( background-attachment: fixed; ) untuk mengefix tampilan gambar supaya tidak berantakan ( error )

Properti background-repeat

Adalah properti CSS yang digunakan untuk mengatur pengulangan gambar latar belakang dari sebuah elemen HTML

Properti background-repeat ini memiliki 4 nilai yang dapat digunakan, yaitu:

  1. repeat-x
    Nilai ini akan membuat gambar latar belakang diulang secara horizontal. Jika ukuran gambar lebih kecil dari wadah, maka sisa ruang akan diisi oleh gambar latar belakang yang diulang 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-repeat</p>
  </body>
</html>

  2. repeat-y
    Nilai ini akan membuat gambar latar belakang diulang secara vertikal. Jika ukuran gambar lebih kecil dari wadah, maka sisa ruang akan diisi oleh gambar latar belakang yang diulang. 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-repeat</p>
  </body>
</html>

  3. no-repeat
    Nilai ini akan membuat gambar latar belakang tidak diulang. Jika ukuran gambar lebih kecil dari wadah, maka gambar latar belakang akan ditampilkan sesuai ukurannya. 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-repeat</p>
  </body>
</html>

  4. repeat 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1518655048521-f130df041f66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTJ8fHxlbnwwfHx8fHw%3D");
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <h1>belajar coding by Ripal</h1>

    <p>ini adalah contoh penggunaan properti background-repeat</p>
  </body>
</html>