Site icon Pesona Informatika

Belajar CSS (5. Background)

Akhi Syabab

Background Pada CSS

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

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>

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>


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:

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>

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>


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

Exit mobile version