{"id":1563,"date":"2014-12-30T08:02:39","date_gmt":"2014-12-30T08:02:39","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=1563"},"modified":"2019-06-25T14:18:06","modified_gmt":"2019-06-25T14:18:06","slug":"membuat-website-full-dengan-background-image","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/","title":{"rendered":"Membuat Website Full dengan Background Image"},"content":{"rendered":"<p><a href=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone  wp-image-1566\" src=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11-300x164.jpg\" alt=\"full-screen-backgrounds-11\" width=\"443\" height=\"242\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11-300x164.jpg 300w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11.jpg 728w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/a><\/p>\n<p>Oke teman-teman WebHozz, kali ini kita akan mencoba bagaimana membuat background sebuah website menjadi terlihat full satu halaman. Baik kita akan mencobanya.<\/p>\n<p><!--more--><\/p>\n<p>Yang kita perlukan untuk memanipulasi tampilan background agar terlihat full adalah dengan perintah css seperti dibawah ini teman-teman.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nbackground: url(&quot;309212-Berserker.jpg&quot;)no-repeat center center fixed ;\r\n    -webkit-background-size: cover;\r\n    -moz-background-size: cover;\r\n    -o-background-size: cover;\r\n    background-size: cover;\r\n<\/pre>\n<p>Teman-teman buatlah HTMLnya seperti berikut ini:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;\/pre&gt;\r\n&lt;pre&gt;&lt;div class=&quot;wrapper&quot;&gt;\r\n        &lt;div class=&quot;header&quot;&gt;\r\n            &lt;h1 class=&quot;tittle&quot;&gt;Mustang&lt;\/h1&gt;\r\n            &lt;span class=&quot;subtittle&quot;&gt;&lt;i&gt;American Muscle Car&lt;\/i&gt;&lt;\/span&gt;\r\n        &lt;\/div&gt;&lt;!--end of header--&gt;\r\n\r\n        &lt;div class=&quot;content&quot;&gt;\r\n            &lt;p&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.&lt;\/p&gt;\r\n            &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;\/p&gt;\r\n        &lt;\/div&gt;&lt;!--end of content--&gt;\r\n\r\n        &lt;div class=&quot;footer&quot;&gt;\r\n            &lt;div class=&quot;footerL&quot;&gt;\r\n                Design by &lt;a href=&quot;http:\/\/www.webhozz.com&quot;&gt; WebHozz&lt;\/a&gt;\r\n            &lt;\/div&gt;&lt;!--end of footerL--&gt;\r\n        &lt;\/div&gt;&lt;!--end of footer--&gt;\r\n&lt;\/div&gt;&gt;&lt;!--end of wrapper--&gt;&lt;\/pre&gt;\r\n&lt;pre&gt;<\/pre>\n<p>Jangan lupa teman-teman untuk menggabungkannya dengan CSS yang sudah kita buat tadi, kalian bisa memodifikasi sesuai dengan kebutuhan teman-teman.<br \/>\nDi bawah sudah saya berikan source nya, Oke selamat mencoba.<\/p>\n<p><a title=\"full-background\" href=\"https:\/\/www.dropbox.com\/s\/94ezkgy5nz7m7bl\/full-background.rar?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><span style=\"color: #008000\">DEMO<\/span><\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oke teman-teman WebHozz, kali ini kita akan mencoba bagaimana membuat background sebuah website menjadi terlihat full satu halaman. Baik kita akan mencobanya.<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[275,32,13,114,250,12,9,243,199,128,10],"class_list":["post-1563","post","type-post","status-publish","format-standard","hentry","category-belajar-web-design","tag-belajar-web-desain","tag-belajar-web-design-2","tag-belajar-website","tag-css","tag-css3","tag-desain-website","tag-belajar-html","tag-html-5","tag-html5","tag-web-desain","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat Website Full dengan Background Image - 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-website-full-dengan-background-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Website Full dengan Background Image - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Oke teman-teman WebHozz, kali ini kita akan mencoba bagaimana membuat background sebuah website menjadi terlihat full satu halaman. Baik kita akan mencobanya.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-30T08:02:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-25T14:18:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\"},\"headline\":\"Membuat Website Full dengan Background Image\",\"datePublished\":\"2014-12-30T08:02:39+00:00\",\"dateModified\":\"2019-06-25T14:18:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/\"},\"wordCount\":405,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/full-screen-backgrounds-11-300x164.jpg\",\"keywords\":[\"belajar web desain\",\"belajar web design\",\"belajar website\",\"css\",\"css3\",\"desain website\",\"HTML\",\"html 5\",\"html5\",\"web desain\",\"web design\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/\",\"name\":\"Membuat Website Full dengan Background Image - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/full-screen-backgrounds-11-300x164.jpg\",\"datePublished\":\"2014-12-30T08:02:39+00:00\",\"dateModified\":\"2019-06-25T14:18:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/full-screen-backgrounds-11-300x164.jpg\",\"contentUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/full-screen-backgrounds-11-300x164.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-website-full-dengan-background-image\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Website Full dengan Background Image\"}]},{\"@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\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/putralucio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Website Full dengan Background Image - 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-website-full-dengan-background-image\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Website Full dengan Background Image - WebHozz Blog","og_description":"Oke teman-teman WebHozz, kali ini kita akan mencoba bagaimana membuat background sebuah website menjadi terlihat full satu halaman. Baik kita akan mencobanya.","og_url":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/","og_site_name":"WebHozz Blog","article_published_time":"2014-12-30T08:02:39+00:00","article_modified_time":"2019-06-25T14:18:06+00:00","og_image":[{"width":728,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11.jpg","type":"image\/jpeg"}],"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\/blog\/membuat-website-full-dengan-background-image\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea"},"headline":"Membuat Website Full dengan Background Image","datePublished":"2014-12-30T08:02:39+00:00","dateModified":"2019-06-25T14:18:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/"},"wordCount":405,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11-300x164.jpg","keywords":["belajar web desain","belajar web design","belajar website","css","css3","desain website","HTML","html 5","html5","web desain","web design"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/","url":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/","name":"Membuat Website Full dengan Background Image - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11-300x164.jpg","datePublished":"2014-12-30T08:02:39+00:00","dateModified":"2019-06-25T14:18:06+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/#primaryimage","url":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11-300x164.jpg","contentUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/12\/full-screen-backgrounds-11-300x164.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/membuat-website-full-dengan-background-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Website Full dengan Background Image"}]},{"@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":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/putralucio\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1563","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=1563"}],"version-history":[{"count":8,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1563\/revisions"}],"predecessor-version":[{"id":8583,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1563\/revisions\/8583"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=1563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=1563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=1563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}