{"id":675,"date":"2014-06-05T15:45:35","date_gmt":"2014-06-05T15:45:35","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=675"},"modified":"2019-06-25T14:18:17","modified_gmt":"2019-06-25T14:18:17","slug":"membuat-background-image-css","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/","title":{"rendered":"Membuat Background Image CSS"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-676 aligncenter\" src=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg\" alt=\"css\" width=\"259\" height=\"194\" \/><\/p>\n<p>Salah satu komponen desain website yang cukup penting adalah latar belakang atau lebih dikenal dengan nama background. Background digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten. Background sangat bengaruh terhadap keindahan tampilan website.<!--more--><\/p>\n<p>&nbsp;<\/p>\n<p>Berikut merupakan contoh coding CSS nya:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nbody\r\n{\r\nbackground-image: url('nama file gambar anda');\r\nbackground-repeat: repeat-y;\r\n}\r\n<\/pre>\n<p>Terdapat empat nilai yang dapat diisikan pada properti <code>background-repeat<\/code>, yaitu <code>repeat<\/code>, <code>no-repeat<\/code>, <code>repeat-x<\/code>, dan <code>repeat-y<\/code>. Seperti namanya,<\/p>\n<ul>\n<li><code>no-repeat<\/code> menghilangkan perulangan. Digunakan untuk gambar yang memiliki ukuran besar.<\/li>\n<li><code>repeat-x<\/code> melakukan perulangan gambar hanya pada sumbu x (horizontal).<\/li>\n<li><code>repeat-y<\/code> melakukan perulangan hanya pada sumbu y (vertikal).<\/li>\n<li><code>repeat<\/code> merupakan nilai standar, yang memberikan perulangan pada sumbu x dan sumbu y.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Salah satu komponen desain website yang cukup penting adalah latar belakang atau lebih dikenal dengan nama background. Background digunakan untuk memberikan dekorasi visual terhadap sebuah<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[115,114],"class_list":["post-675","post","type-post","status-publish","format-standard","hentry","category-belajar-web-design","tag-belajar-css","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat Background Image CSS - WebHozz Blog<\/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\/blog\/membuat-background-image-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Background Image CSS - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Salah satu komponen desain website yang cukup penting adalah latar belakang atau lebih dikenal dengan nama background. Background digunakan untuk memberikan dekorasi visual terhadap sebuah\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-05T15:45:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-25T14:18:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"259\" \/>\n\t<meta property=\"og:image:height\" content=\"194\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Membuat Background Image CSS\",\"datePublished\":\"2014-06-05T15:45:35+00:00\",\"dateModified\":\"2019-06-25T14:18:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/\"},\"wordCount\":114,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/css1.jpg\",\"keywords\":[\"belajar css\",\"css\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/\",\"name\":\"Membuat Background Image CSS - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/css1.jpg\",\"datePublished\":\"2014-06-05T15:45:35+00:00\",\"dateModified\":\"2019-06-25T14:18:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/css1.jpg\",\"contentUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/css1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-background-image-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Background Image CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Background Image CSS - WebHozz Blog","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\/blog\/membuat-background-image-css\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Background Image CSS - WebHozz Blog","og_description":"Salah satu komponen desain website yang cukup penting adalah latar belakang atau lebih dikenal dengan nama background. Background digunakan untuk memberikan dekorasi visual terhadap sebuah","og_url":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/","og_site_name":"WebHozz Blog","article_published_time":"2014-06-05T15:45:35+00:00","article_modified_time":"2019-06-25T14:18:17+00:00","og_image":[{"width":259,"height":194,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/"},"author":{"name":"","@id":""},"headline":"Membuat Background Image CSS","datePublished":"2014-06-05T15:45:35+00:00","dateModified":"2019-06-25T14:18:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/"},"wordCount":114,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg","keywords":["belajar css","css"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/","url":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/","name":"Membuat Background Image CSS - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg","datePublished":"2014-06-05T15:45:35+00:00","dateModified":"2019-06-25T14:18:17+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#primaryimage","url":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg","contentUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/css1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/membuat-background-image-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Background Image CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"","url":"https:\/\/www.webhozz.com\/blog\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=675"}],"version-history":[{"count":4,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":680,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/675\/revisions\/680"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}