Background CSS

Buat kamu yang ingin jadi web developer professional tentunya harus tau tentang background karena banyak web premium sekarang memanfaatkan feature background.

Dengan CSS kamu bisa membuat background warna atau background gambar untuk semua element HTML. Khusus untuk background image kamu bisa membuatnya tampil secara berderet horizontal maupun vertical. Selain itu kamu juga bisa membuat background image tampil dengan posisi fixed atau bergerak sesuai dengan gerakan scroll.

Background color

Efek background color dibawah ini bisa kamu dapatkan tanpa menggunakan table, tidak seperti harus adanya table pada background color HTML.

Code CSS background color:

h4 { background-color: yellow; }
p { background-color: #33FFFF; }
ul { background-color: rgb(253,188,249); }

Hasil code CSS background color:

Ini adalah text <h4> menggunakan background color yellow

Ini adalah tag <p> menggunakan background color dengan nilai hexadecimal #33FFFF

  • Ini adalah unordered list dengan background color
  • Color yang digunakan adalah model RGB dengan value (253,188,249)

Pada contoh diatas kita menggunakan tiga model warna yaitu nama warna, hexadecimal dan RGB.

Background image

Ada beberapa opsi bila kamu ingin menggunakan image sebagai background, diantaranya adalah:

  • Background image akan ditampilkan berulang atau repeat dengan arah yang kamu inginkan.
  • Background image kamu tempatkan sesuai keinginan kamu.
  • Image bisa kamu buat static ataupun scrolling.

Mari kita mulai dengan standar background image CSS. Secara default, background image akan di repeat sepanjang element HTML yang diberi background.

CSS code background image:

h4{ background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif); }

Hasil CSS code background image:

Gambar asli: sm72_17

Heading <h4> ini memakai backgorund image yang diulang-ulang secara vertical dan horizontal. Heading <h4> ini memakai backgorund image yang diulang-ulang secara vertical dan horizontal.

Background repeat

Dengan CSS kamu bisa membuat sebuah background image ditampilkan ulang secara vertical maupun horizontal, ataupun tidak di ulang.

Code CSS background image:

p {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-repeat: repeat; }
h4 {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-repeat: repeat-y;}
ol {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-repeat: repeat-x;}
ul {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-repeat: no-repeat;}

Hasil Code CSS background image:

Gambar background asli: s136_02

Tag <p> ini diikuti oleh background image yang ditampilkan berulang dengan arah vertical maupun horizontal. Pastikan bahwa background image yang kamu miliki memang didesaign untuk ditampilkan secara berulang.

Tag <h4> ini memiliki background image yang direpeat dengan arah vertical (y). Selain itu kamu juga bisa menambahkan style lainnya ke element ini. Kamu bisa melihat background image tidak di repeat kearah kanan melainkan hanya direpeat kebawah.

  1. Ini adalah ordered list
  2. Dengan background yang repeat secara:
  3. Horizontal (x)
  • Ini adalah unordered list
  • Dengan background yang yang tidak direpeat
  • Baik horizontal (x) maupun vertical (y)

Background attachment

Dengan CSS background image kamu bisa menampilkan background image kamu tidak bergeser atau bergeser sesuai dengan gerakan page maupun element.

fixed image akan tetap fixed atau tidak bergerak ketika page sedang kita gerakkan atau kita scroll
scroll image akan scroll atau bergerak mengikuti page yang sedang kita gerakkan atau kita scroll
local background image atau bergerak mengikuti gerakan element

Untuk default valuenya adalah fixed.

Code CSS background attachment:

textarea.TidakPakaiScroll {
background-image: url(http://jujucode.files.wordpress.com/2014/08/winter-20234_640-e1406863376138.jpg);
background-attachment: fixed;
}
textarea.PakaiLocal {
background-image: url(http://jujucode.files.wordpress.com/2014/08/winter-20234_640-e1406863376138.jpg);
background-attachment: local;}

Code HTML background attachment:

Textarea dibawah memakai background attachment fixed:
<textarea class="TidakPakaiScroll">Background image yang ada pada beberapa paragraph ini tidak ikut bergerak ketika page kita gerakkan. Background image yang ada pada beberapa paragraph ini tidak ikut bergerak ketika page kita gerakkan. Background image yang ada pada beberapa paragraph ini tidak ikut bergerak ketika page kita gerakkan. Background image yang ada pada beberapa paragraph ini tidak ikut bergerak ketika page kita gerakkan. Background image yang ada pada beberapa paragraph ini tidak ikut bergerak ketika page kita gerakkan.</textarea>

Textarea dibawah memakai background attachment local: 
<textarea class="PakaiLocal">Paragraph ini memiliki background image yang ikut bergerak bersamaan dengan text yang sedang kita gerakkan. Paragraph ini memiliki background image yang ikut bergerak bersamaan dengan text yang sedang kita gerakkan. Paragraph ini memiliki background image yang ikut bergerak bersamaan dengan text yang sedang kita gerakkan. Paragraph ini memiliki background image yang ikut bergerak bersamaan dengan text yang sedang kita gerakkan. Paragraph ini memiliki background image yang ikut bergerak bersamaan dengan text yang sedang kita gerakkan.</textarea>

Hasil code CSS background attachment:

Textarea dibawah memakai background attachment fixed:


Textarea dibawah memakai background attachment local:

Background position

Jika kamu ingin background image tampil pada posisi yang kamu inginkan maka kamu bisa menggunakan rumus CSS background-position. Ada tiga cara menentukan posisi sebuah background image yaitu dengan length, persen dan keyword. Saya merekomendasikan kamu untuk menggunakan length yang berarti memakai satuan pixel.

Code CSS:

p {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-position: 20px 2px;
background-repeat: no-repeat;
}
h4 {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-position: 30% 30%;
background-repeat: no-repeat;
}
ol {
background-image: url(https://jujucode.files.wordpress.com/2015/01/kotak2.gif);
background-position: top center;
background-repeat: no-repeat;
}

Hasil code CSS:

Gambar background image asli: sm72_17

Element <p> ini memiliki background image yang diposisikan dengan satuan pixel.

Element <h4> ini memiliki background image yang diposisikan dengan satuan persen.

  1. Ini adalah sebuah ordered list
  2. Dengan background yang diposisikan
  3. menggunakan keyword top center

Yang perlu diperhatikan adalah:

  • Saat menggunakan pixel, lokasi image akan berada sejauh (A)px dari kiri layar dan sejauh (B)px dari dari atas layar. A dan B adalah angka integer.
  • Saat menggunakan persen, lokasi image akan berada sejauh (A)% dari kiri layar dan sejauh (B)% dari atas layar. A dan B adalah angka integer.
  • Untuk keyword kamu bisa menggunakan: top, right, left, bottom dan center.

Background gradient

Jika kamu ingin menggunakan gradient background maka pertama kamu harus membuat gambarnya terlebih dahulu dengan software menggambar (photoshop atau corel). Image dibawah ini adalah contoh gradient background image.

Contoh gradient image:

gradbackground

Perhatikan bahwa image diatas sangat tipis. Dari gambar diatas kita bisa menampilkannya repeat secara horizontal. Lebar minimal yang bisa kamu gunakan adalah 1 pixel.

Untuk attribute repeat: kita bisa mengatur value dari code CSS menjadi repeat-x sehingga gambar akan ditampilkan secara berulang mulai dari kiri sampai kanan element. Dengan cara ini kita bisa memuat background gradient image.

Kenapa kita membuat image yang sangat tipis diatas? Alasannya adalah dengan image yang sangat minimal maka ukuran file akan menjadi sangat kecil sehingga loading web pagemu tidak menjadi terhambat dengan background image ini.

Code CSS gradient image background:

p {
background-image: url(http://jujucode.files.wordpress.com/2014/05/gradbackground.jpg);
background-repeat: repeat-x;
}

Hasil tampilan gradient image background:

Paragraph text ini memiliki gradient image background. Pertama kamu bisa membuat gradient image menggunakan software painting seperti corel maupun photosop. Lalu image tersebut bisa kamu repeat secara horizontal sepanjang element yang kamu mau. Selain kearah horizontal kamu juga bisa membuat gambar yang ditampilkan berulang secara vertical dari atas ke bawah sepanjang web page yang kamu punya.

2 Responses to “Background CSS”

  1. Hola Ady! Superr interesante ! me encantó y me lo guardo en la memoria! Soy bastante estudiosa . es más se más de teoría que de práctica!!! jaja … gracias por compartir tus conocimientos! besoss

  2. Waaaaahnsinn, die ist ja wieder wundervoll Рaber ganz sch̦n schwer..so schnell wird der Wind die nicht wegpusten. Ganz super, liebe Barbara, bin immer wieder begeistert von deinen Werken.LG Britta

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>