{"id":8354,"date":"2015-01-02T18:30:00","date_gmt":"2015-01-02T18:30:00","guid":{"rendered":"http:\/\/superdevresources.com\/full-background-image-css\/"},"modified":"2020-06-18T11:58:59","modified_gmt":"2020-06-18T06:28:59","slug":"full-background-image-css","status":"publish","type":"post","link":"https:\/\/superdevresources.com\/full-background-image-css\/","title":{"rendered":"Full Screen Background Image with CSS"},"content":{"rendered":"<p>Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is placed on top of this full-screen background image. The background image remains fixed at its position as user scrolls and is also responsive, therefore is suitable to be viewed on all device sizes.<\/p>\n<div class=\"image-wrapper\">\n<figure style=\"width: 718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg\" alt=\"Full-Screen background image in web design\" width=\"728\" height=\"404\"><figcaption class=\"wp-caption-text\">Tap on image for Demo of Full Screen background Image<\/figcaption><\/figure>\n<\/div>\n<p>In this post I will show, how we can easily place such full screen background images in websites using CSS3. This code example should work in all modern browsers which support CSS3 (IE9+, Chrome, Safari, Opera 10+ and Firefox 3.6+)<\/p>\n<h2 id=\"css-code-for-full-screen-background-image\">CSS code for Full-Screen background image<\/h2>\n<p>The full screen background image is generally placed as <code class=\"highlighter-rouge\">background<\/code> property of <code class=\"highlighter-rouge\">html<\/code> or <code class=\"highlighter-rouge\">body<\/code> tag. Below we have added the CSS code to the <code class=\"highlighter-rouge\">body<\/code> tag for setting a full screen background image.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-css\"><span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"sx\">url(new-york-background.jpg)<\/span> <span class=\"nb\">no-repeat<\/span> <span class=\"nb\">center<\/span> <span class=\"nb\">center<\/span> <span class=\"nb\">fixed<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">-webkit-background-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">cover<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">-moz-background-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">cover<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">-o-background-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">cover<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">cover<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span><\/code><\/pre>\n<\/figure>\n<p>Note the use of <code class=\"highlighter-rouge\">background-size<\/code> property which is present in CSS3 and by setting this property to <code class=\"highlighter-rouge\">cover<\/code> we are asking the browser to use the background image to cover the entire width and height of the browser window.<\/p>\n<p>We have also asked the browser to keep the background image centered and fixed at its position. Due to this, when user scrolls, the background image stays at its place. And when user resizes the browser window, or views it on device with different sizes, the background image gets automatically stretched or clipped in order to cover the entire width and height of browser window.<\/p>\n<h2 id=\"demo-of-full-screen-background-image\">Demo of Full-Screen Background Image<\/h2>\n<p>As you can see it is pretty easy to set an image as full screen background image and works well with responsive web design. You can view the demo as well as the full code on CodePen using one of the options below:<\/p>\n<p class=\"text-center\"><a class=\"ghost-button\" href=\"http:\/\/codepen.io\/kanishkkunal\/full\/MYbmzN\/\" target=\"_blank\" rel=\"noopener\">Full Demo<\/a> <a class=\"ghost-button\" href=\"http:\/\/codepen.io\/kanishkkunal\/pen\/MYbmzN\/\" target=\"_balnk\" rel=\"noopener\">Full Code<\/a><\/p>\n<p>Or Play with the CodePen embed below:<\/p>\n<div class=\"embed\">\n<p class=\"codepen\"><p class='codepen'  data-height='450' data-theme-id='0' data-slug-hash='MYbmzN' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Full Screen Background Image\u00a0by Kanishk Kunal on CodePen.<\/p>\n<\/p>\n<\/div>\n<h2 id=\"support-for-older-browsers\">Support for Older browsers<\/h2>\n<p>While what we did was pretty short and sweet but some of you may desire that this works on older browsers too. There is no one solution that fits all browsers, however you can take a look at different techniques suggested on <a href=\"http:\/\/css-tricks.com\/perfect-full-page-background-image\/\">CSS-Tricks<\/a> some of which include use of JavaScripts too.<\/p>\n<h2 id=\"credit-for-background-image-used\">Credit for Background Image used<\/h2>\n<p>The background image used in the demo above has been taken from <a href=\"http:\/\/pixabay.com\/\">Pixabay<\/a> and is licensed CC0 i.e. free for commercial use too. You can find more such <a href=\"https:\/\/superdevresources.com\/4-sources-of-free-and-unique-high-quality-images-for-your-app\/\">free high quality images<\/a> and <a href=\"https:\/\/superdevresources.com\/free-images-for-commercial-use\/\">free images for commercial use<\/a> and many other <a href=\"https:\/\/superdevresources.com\/tag\/free-resources\/\">free resources on SuperDevResources<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many modern web designs have started to adopt a large background image which covers the entire width and &#8230; <a title=\"Full Screen Background Image with CSS\" class=\"read-more\" href=\"https:\/\/superdevresources.com\/full-background-image-css\/\" aria-label=\"Read more about Full Screen Background Image with CSS\"><span><\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":1675,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[167,155,171],"class_list":["post-8354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-flat-web-design","tag-html-css","tag-responsive-web-design","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding","resize-featured-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Full Screen Background Image with CSS - Super Dev Resources<\/title>\n<meta name=\"description\" content=\"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/superdevresources.com\/full-background-image-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full Screen Background Image with CSS - Super Dev Resources\" \/>\n<meta property=\"og:description\" content=\"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/superdevresources.com\/full-background-image-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Super Dev Resources\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/superdevresources\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kanishkkunal\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-02T18:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T06:28:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"404\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kanishk Kunal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kanishkkunal\" \/>\n<meta name=\"twitter:site\" content=\"@superdevres42\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kanishk Kunal\" \/>\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:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/\"},\"author\":{\"name\":\"Kanishk Kunal\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\"},\"headline\":\"Full Screen Background Image with CSS\",\"datePublished\":\"2015-01-02T18:30:00+00:00\",\"dateModified\":\"2020-06-18T06:28:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/\"},\"wordCount\":450,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/full-screen-background-image.jpg\",\"keywords\":[\"Flat Web Design\",\"HTML &amp; CSS\",\"Responsive Web Design\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/\",\"name\":\"Full Screen Background Image with CSS - Super Dev Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/full-screen-background-image.jpg\",\"datePublished\":\"2015-01-02T18:30:00+00:00\",\"dateModified\":\"2020-06-18T06:28:59+00:00\",\"description\":\"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/full-screen-background-image.jpg\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/full-screen-background-image.jpg\",\"width\":728,\"height\":404},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/full-background-image-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/category\\\/development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Full Screen Background Image with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"name\":\"Super Dev Resources\",\"description\":\"Design, Development, Business &amp; Marketing Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/45.32.231.40\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\",\"name\":\"Super Dev Resources\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"width\":512,\"height\":512,\"caption\":\"Super Dev Resources\"},\"image\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/superdevresources\",\"https:\\\/\\\/x.com\\\/superdevres42\",\"https:\\\/\\\/www.pinterest.com\\\/superdevres42\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\",\"name\":\"Kanishk Kunal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"caption\":\"Kanishk Kunal\"},\"description\":\"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal\",\"sameAs\":[\"https:\\\/\\\/kanishkkunal.com\",\"https:\\\/\\\/www.facebook.com\\\/kanishkkunal\",\"https:\\\/\\\/www.instagram.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kanishkkunal\",\"https:\\\/\\\/in.pinterest.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/x.com\\\/kanishkkunal\",\"kanishkkunal\"],\"url\":\"https:\\\/\\\/superdevresources.com\\\/author\\\/kanishk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Full Screen Background Image with CSS - Super Dev Resources","description":"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is","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:\/\/superdevresources.com\/full-background-image-css\/","og_locale":"en_US","og_type":"article","og_title":"Full Screen Background Image with CSS - Super Dev Resources","og_description":"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is","og_url":"https:\/\/superdevresources.com\/full-background-image-css\/","og_site_name":"Super Dev Resources","article_publisher":"https:\/\/www.facebook.com\/superdevresources","article_author":"https:\/\/www.facebook.com\/kanishkkunal","article_published_time":"2015-01-02T18:30:00+00:00","article_modified_time":"2020-06-18T06:28:59+00:00","og_image":[{"width":728,"height":404,"url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg","type":"image\/jpeg"}],"author":"Kanishk Kunal","twitter_card":"summary_large_image","twitter_creator":"@kanishkkunal","twitter_site":"@superdevres42","twitter_misc":{"Written by":"Kanishk Kunal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/superdevresources.com\/full-background-image-css\/#article","isPartOf":{"@id":"https:\/\/superdevresources.com\/full-background-image-css\/"},"author":{"name":"Kanishk Kunal","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d"},"headline":"Full Screen Background Image with CSS","datePublished":"2015-01-02T18:30:00+00:00","dateModified":"2020-06-18T06:28:59+00:00","mainEntityOfPage":{"@id":"https:\/\/superdevresources.com\/full-background-image-css\/"},"wordCount":450,"commentCount":6,"publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"image":{"@id":"https:\/\/superdevresources.com\/full-background-image-css\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg","keywords":["Flat Web Design","HTML &amp; CSS","Responsive Web Design"],"articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/superdevresources.com\/full-background-image-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/superdevresources.com\/full-background-image-css\/","url":"https:\/\/superdevresources.com\/full-background-image-css\/","name":"Full Screen Background Image with CSS - Super Dev Resources","isPartOf":{"@id":"https:\/\/45.32.231.40\/#website"},"primaryImageOfPage":{"@id":"https:\/\/superdevresources.com\/full-background-image-css\/#primaryimage"},"image":{"@id":"https:\/\/superdevresources.com\/full-background-image-css\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg","datePublished":"2015-01-02T18:30:00+00:00","dateModified":"2020-06-18T06:28:59+00:00","description":"Many modern web designs have started to adopt a large background image which covers the entire width and height of browser window. The website content is","breadcrumb":{"@id":"https:\/\/superdevresources.com\/full-background-image-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/superdevresources.com\/full-background-image-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/superdevresources.com\/full-background-image-css\/#primaryimage","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg","width":728,"height":404},{"@type":"BreadcrumbList","@id":"https:\/\/superdevresources.com\/full-background-image-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/superdevresources.com\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/superdevresources.com\/category\/development\/"},{"@type":"ListItem","position":3,"name":"Full Screen Background Image with CSS"}]},{"@type":"WebSite","@id":"https:\/\/45.32.231.40\/#website","url":"https:\/\/45.32.231.40\/","name":"Super Dev Resources","description":"Design, Development, Business &amp; Marketing Resources","publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/45.32.231.40\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/45.32.231.40\/#organization","name":"Super Dev Resources","url":"https:\/\/45.32.231.40\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","width":512,"height":512,"caption":"Super Dev Resources"},"image":{"@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/superdevresources","https:\/\/x.com\/superdevres42","https:\/\/www.pinterest.com\/superdevres42\/"]},{"@type":"Person","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d","name":"Kanishk Kunal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","caption":"Kanishk Kunal"},"description":"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal","sameAs":["https:\/\/kanishkkunal.com","https:\/\/www.facebook.com\/kanishkkunal","https:\/\/www.instagram.com\/kanishkkunal\/","https:\/\/www.linkedin.com\/in\/kanishkkunal","https:\/\/in.pinterest.com\/kanishkkunal\/","https:\/\/x.com\/kanishkkunal","kanishkkunal"],"url":"https:\/\/superdevresources.com\/author\/kanishk\/"}]}},"jetpack_featured_media_url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2015\/01\/full-screen-background-image.jpg","jetpack-related-posts":[{"id":10050,"url":"https:\/\/superdevresources.com\/free-seamless-patterns\/","url_meta":{"origin":8354,"position":0},"title":"500+ Free Website Background Patterns &#038; Seamless Pattern Generators","author":"SDR Team","date":"June 6, 2018","format":false,"excerpt":"Using a repeatable pattern in website backgrounds or in graphic design is a popular way to add personality to your design. These repeatable patterns are also known as seamless patterns, pattern backgrounds or subtle patterns. A background pattern is a great choice when you are looking for website backgrounds, social\u2026","rel":"","context":"In &quot;Design&quot;","block_context":{"text":"Design","link":"https:\/\/superdevresources.com\/category\/design\/"},"img":{"alt_text":"subtle patterns","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2018\/06\/subtle-patterns.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2018\/06\/subtle-patterns.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2018\/06\/subtle-patterns.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2018\/06\/subtle-patterns.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":154,"url":"https:\/\/superdevresources.com\/responsive-table\/","url_meta":{"origin":8354,"position":1},"title":"Responsive Table with alternate color rows","author":"Kanishk Kunal","date":"November 30, 2014","format":false,"excerpt":"In this post I will be sharing CSS code snippet for making a simple responsive table with alternate color rows (zebra stripes). I made use of these when making leader-board tables for our HTML5 games. CSS for Responsive Table Please note that we are making a very simple responsive table\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"responsive table with zebra stripes","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/11\/responsive-table-zebra-stripe.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":8356,"url":"https:\/\/superdevresources.com\/fixed-width-sidebar\/","url_meta":{"origin":8354,"position":2},"title":"Fixed width sidebar in responsive design","author":"Kanishk Kunal","date":"December 10, 2014","format":false,"excerpt":"When I was redesigning a few\u00a0sites, I wanted to put a fixed width sidebar to place ads. But since I was working on to make a responsive design for the site, a sidebar based on grid layouts which are based on percent-width wouldn\u2019t have solved my purpose. In this post,\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/12\/fixed-width-sidebar-layout.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/12\/fixed-width-sidebar-layout.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/12\/fixed-width-sidebar-layout.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/12\/fixed-width-sidebar-layout.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":72,"url":"https:\/\/superdevresources.com\/bootstrap-wordpress-themes\/","url_meta":{"origin":8354,"position":3},"title":"30+ Bootstrap WordPress Themes for Free Download &#038; Paid Purchase","author":"SDR Team","date":"February 9, 2016","format":false,"excerpt":"Since Bootstrap is one the most popular responsive web design framework, it is quite natural for developers to use it for developing websites. While we have plenty of free bootstrap HTML templates, we will be focusing on Bootstrap WordPress themes in this article. Developing a WordPress theme is not an\u2026","rel":"","context":"In &quot;Themes &amp; Templates&quot;","block_context":{"text":"Themes &amp; Templates","link":"https:\/\/superdevresources.com\/category\/themes-templates\/"},"img":{"alt_text":"alum bootstrap wordpress theme","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/02\/alum-bootstrap-wordpress-theme.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/02\/alum-bootstrap-wordpress-theme.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/02\/alum-bootstrap-wordpress-theme.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/02\/alum-bootstrap-wordpress-theme.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1420,"url":"https:\/\/superdevresources.com\/html-resume-templates\/","url_meta":{"origin":8354,"position":4},"title":"30+ Professional HTML &amp; CSS Resume Templates for Free Download (and Premium)","author":"SDR Team","date":"April 15, 2025","format":false,"excerpt":"Professionally designed HTML Resume Templates which are available for free download are hard to find as most of the templates are either outdated or lack the class. But in this post we present to you some of the mostly elegantly designed, clean and modern resume\/CV HTML & CSS templates which\u2026","rel":"","context":"In &quot;Learning &amp; Career&quot;","block_context":{"text":"Learning &amp; Career","link":"https:\/\/superdevresources.com\/category\/career\/"},"img":{"alt_text":"right resume screenshot","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/01\/right-resume-screenshot.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/01\/right-resume-screenshot.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/01\/right-resume-screenshot.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/01\/right-resume-screenshot.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":13111,"url":"https:\/\/superdevresources.com\/one-page-wordpress-themes-business\/","url_meta":{"origin":8354,"position":5},"title":"25 One Page WordPress themes for Business, Agency and Startup","author":"SDR Team","date":"March 31, 2016","format":false,"excerpt":"When it comes to\u00a0choosing a site template for a Business, Agency or Startup, you may want to consider looking at professionally developed one page website templates. Building a WordPress website using\u00a0a one page WordPress theme is the most popular\u00a0choice or product launches and\u00a0startups.\u00a0Here, you will find some of the best\u2026","rel":"","context":"In &quot;Business &amp; Startups&quot;","block_context":{"text":"Business &amp; Startups","link":"https:\/\/superdevresources.com\/category\/business\/"},"img":{"alt_text":"llorix one theme","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/03\/llorix-one-theme.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/03\/llorix-one-theme.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/03\/llorix-one-theme.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/03\/llorix-one-theme.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/8354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/comments?post=8354"}],"version-history":[{"count":0,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/8354\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media\/1675"}],"wp:attachment":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media?parent=8354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/categories?post=8354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/tags?post=8354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}