Belajar CSS (5. Background)

Belajar CSS (5. Background)

Background Pada CSS

Properti css background digunakan untuk menentukan latar belakang suatu elemen.
Properti css yang digunakan untuk efek background yaitu :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

1. background-color

ex.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #b0c4de;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a background color!</p>

</body>
</html>

hasil

dalam css, penulisan warna yang paling sering digunakan yaitu menggunakan nilai hex seperti diatas, menggunakan nilai RGB seperti “rgb(255,0,0)”, atau warna langsung seperti “red”.

2. background-image
properti css background-image digunakan untuk memberi gambar pada latar belakang.
ex.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("http://pesonainformatika.com/wp-content/uploads/2016/04/cropped-pexels-photo-54283.jpeg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

hasil
contoh diatas saya menggunakan gambar dengan meng-link gambar yang sudah ada di situs pesona informatika . penempatan gambar satu folder dengan kode html dapat anda lihat di contoh bawah setelah ini.

3. background-repeat
properti css background-repeat digunakan untuk mengulang secara horizontal “-x” atau secara vertical “-y”
ex.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("repeat.png");
    background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a backgound image is repeated only horizontally!</p>

</body>
</html>

hasilnya sebagai berikut:
hasil

4. background-position
digunakan untuk menentukan posisi gambar
ex.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("repeat.png");
    background-repeat: no-repeat;
    background-position: center top;

}
</style>
</head>
<body>
<h1>selamat belajar<h1>
</body>
</html>

hasil

untuk background-position kita dapat menuliskan berbagai cara yaitu dengan cara posisi langsung seperti diatas dan contoh yang lainya yaitu :
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
menggunakan cara x% y%

background-position:50% 50%;

menggunakan cara xpos ypos

background-position:10px 200px;

dan cara initial

background-position:initial;

5. background-attachment
digunakan untuk menentukan apakah background keadaan tetap saat di secrool atau tidak
ex.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("repeat.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>
</html>

hasil
contoh diatas kami menggunakan value “fixed”. anda dapat mencoba sendiri menggunakan value yang lain.

Value : Description
scroll : The background scrolls along with the element. This is default
fixed : The background is fixed with regard to the viewport.
local : The background scrolls along with the element’s contents.
initial : Sets this property to its default value.
inherit : Inherits this property from its parent element.

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

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