{"id":111,"date":"2019-07-19T11:55:51","date_gmt":"2019-07-19T11:55:51","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=111"},"modified":"2019-09-03T11:51:43","modified_gmt":"2019-09-03T11:51:43","slug":"css-background","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/css-background\/","title":{"rendered":"CSS : Background"},"content":{"rendered":"\n

Background Properties <\/h4>\n\n\n\n

CSS menyediakan beberapa properti untuk menata background, seperti: background-color<\/code>, background-image<\/code>, background-repeat<\/code>, background-attachment<\/code> dan background-position<\/code>. <\/p>\n\n\n\n

Background Color <\/h4>\n\n\n\n

Properti background-color digunakan untuk mengatur warna background suatu elemen.<\/p>\n\n\n\n

Contoh di bawah ini menunjukkan, cara mengatur warna background halaman web.<\/p>\n\n\n

\nbody {\n    background-color: #f0e68c;\n}\n<\/pre><\/div>\n\n\n
Warna pada CSS paling sering ditentukan oleh metode berikut:<\/p>\n\n\n\n
  • HEX value – seperti “#ff0000”<\/li>
  • RGB value – seperti “rgb(255,0,0)”<\/li>
  • Color name – seperti “red” <\/li><\/ul>\n\n\n\n
     Background Image <\/h4>\n\n\n\n
    Properti background-image menetapkan gambar sebagai latar belakang elemen HTML.<\/p>\n\n\n\n
    Lihat contoh di bawah ini yang menerangkan cara mengatur background gambar pada sebuah halaman:<\/p>\n\n\n
    \nbody {\n    background-image: url("leaf.jpg");\n}\n<\/pre><\/div>\n\n\n
     Background Repeat <\/h4>\n\n\n\n
    Secara default background-image<\/code> property akan mengulang terus baik itu secara vertical maupun horizontal.<\/p>\n\n\n\n
    Dengan menggunakan properti background-repeat<\/code> kalian bisa mengontrol bagaimana background gambar akan dipasang\/ditampilkan pada background elemen html. Kalian dapat mengatur background gambar akan diulang secara vertikal (sumbu y), horizontal (sumbu x) di kedua arah, atau sebaliknya.<\/p>\n\n\n\n
    Lihat contoh di bawah ini yang menunjukkan cara mengatur gradient background untuk halaman web dengan perulangan potongan gambar secara horizontal.<\/p>\n\n\n
    \nbody {\n    background-image: url("gradient.png");\n    background-repeat: repeat-x;\n}\n<\/pre><\/div>\n\n\n
    Background Attachment <\/h4>\n\n\n\n
    Background attachment menentukan apakah gambar latar fix (diam) atau akan ikut ter-scroll bersama halaman. Nilainya scroll atau fixed. Defaultnya scroll. Berikut contohnya:<\/p>\n\n\n
    \nbody {\n    width: 250px;\n    height: 200px;\n    overflow: scroll;\n    background-image: url("recycle.jpg");\n    background-attachment: fixed;\n}\n<\/pre><\/div>\n\n\n
    Background Position <\/h4>\n\n\n\n
    Property background-position digunakan untuk menentukan\nposisi background image.<\/p>\n\n\n\n
    Jika tidak ada background-position yang ditentukan, gambar ditempatkan pada posisi kiri-atas default elemen yaitu di (0,0). Lihat contoh di bawah ini:<\/p>\n\n\n
    \nbody {\n    background-image: url("tree.png");\n    background-repeat: no-repeat;\n}\n<\/pre><\/div>\n\n\n
    Dalam contoh berikut, gambar latar diposisikan di sudut kanan atas dan posisi gambar ditentukan oleh background-position<\/code> property.<\/p>\n\n\n
    \nbody {\n    background-image: url("tree.png");\n    background-repeat: no-repeat;\n    background-position: 100% top;\n}\n<\/pre><\/div>\n\n\n
    Background Shorthand Property <\/h4>\n\n\n\n
    Seperti yang bisa kalian lihat dari contoh di atas, ada banyak properti yang bisa digunakan ketika ingin mengatur latar belakang. Tetapi bisa juga menggabungkan semua properti tersebut ke dalam satu properti (single property) untuk mempersingkat kode. Hal ini disebut shorthand property. Berikut contoh kodenya: <\/p>\n\n\n
    \nbody {\n    background-color: #f0e68c;\n    background-image: url("smiley.png");\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n    background-position: 250px 25px;\n}\n<\/pre><\/div>\n\n\n
    Bila menggunakan notasi shorthand, maka contoh di atas dapat ditulis sebagai berikut:<\/p>\n\n\n
    \nbody {\n    background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;\n}\n<\/pre><\/div>\n\n\n
    Ketika menggunakan background<\/code> shorthand property maka kode nilai property nya harus:<\/p>\n\n\n
    \nbackground: color image repeat attachment position;\n<\/pre><\/div>\n\n\n
    Jika nilai untuk individu background property hilang atau tidak ditentukan saat menggunakan notasi shorthand, maka nilai default untuk properti itu akan digunakan sebagai gantinya, jika ada.<\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Background Properties CSS menyediakan beberapa properti untuk menata background, seperti: background-color, background-image, background-repeat, background-attachment dan background-position. Background Color Properti background-color digunakan untuk mengatur warna background suatu elemen. Contoh di bawah<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-111","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nBelajar CSS : Background - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/css-background\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS : Background - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Background Properties CSS menyediakan beberapa properti untuk menata background, seperti: background-color, background-image, background-repeat, background-attachment dan background-position. Background Color Properti background-color digunakan untuk mengatur warna background suatu elemen. Contoh di bawah\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/css-background\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-19T11:55:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:51:43+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"CSS : Background\",\"datePublished\":\"2019-07-19T11:55:51+00:00\",\"dateModified\":\"2019-09-03T11:51:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/\"},\"wordCount\":327,\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/\",\"name\":\"Belajar CSS : Background - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-19T11:55:51+00:00\",\"dateModified\":\"2019-09-03T11:51:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-background\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS : Background\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar CSS : Background - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/css-background\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS : Background - WebHozz Code","og_description":"Background Properties CSS menyediakan beberapa properti untuk menata background, seperti: background-color, background-image, background-repeat, background-attachment dan background-position. Background Color Properti background-color digunakan untuk mengatur warna background suatu elemen. Contoh di bawah","og_url":"https:\/\/www.webhozz.com\/code\/css-background\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-19T11:55:51+00:00","article_modified_time":"2019-09-03T11:51:43+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/css-background\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/css-background\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"CSS : Background","datePublished":"2019-07-19T11:55:51+00:00","dateModified":"2019-09-03T11:51:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/css-background\/"},"wordCount":327,"articleSection":["CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/css-background\/","url":"https:\/\/www.webhozz.com\/code\/css-background\/","name":"Belajar CSS : Background - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-19T11:55:51+00:00","dateModified":"2019-09-03T11:51:43+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/css-background\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/css-background\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/css-background\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"CSS : Background"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":3,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":385,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/111\/revisions\/385"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}