I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is just an <img> tag that is dynamically resized using jQuery. Here is the full source:<\/p>\n
<?php\r\n\/**\r\n * @package Full screen background\r\n * @version 0.1\r\n *\/\r\n\r\n\/*\r\nPlugin Name: Full screen background\r\nPlugin URI: http:\/\/www.trappers.tk\/share\/fullbg.tar.gz\r\nDescription: Full screen background, like the google home page \r\nAuthor: Jeroen Trappers\r\nVersion: 0.1\r\nAuthor URI: http:\/\/blog.trappers.tk\r\n*\/\r\n\r\nfunction wp_full_bg() {\r\n?>\r\n <img id=\"wpfullbg\" src=\"http:\/\/www.example.org\/wallpaper.png\" >\r\n <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.js\"><\/script>\r\n <script type=\"text\/javascript\" language=\"javascript\">\r\n $(function() {\r\n \tfullbg();\r\n\t $(window).resize(fullbg);\r\n });\r\n function fullbg() {\r\n var imgw = $('#wpfullbg').width();\r\n var imgh = $('#wpfullbg').height();\r\n var vpw = $(window).width();\r\n var vph = $(window).height(); \r\n \r\n var imgratio = imgw \/ imgh;\r\n var viewportratio = vpw \/ vph;\r\n\r\n var w = vpw;\r\n var h = vph;\r\n\t\r\n if( viewportratio > imgratio )\r\n {\r\n \/\/ screen is wider than picture -> increase the heigth of the picture;\r\n h = w \/ imgratio; \r\n }\t\r\n else \r\n {\r\n w = h * imgratio;\r\n }\r\n\r\n $('#wpfullbg').css(\r\n { \r\n 'left': '0px',\r\n 'width': w,\r\n 'height': h,\r\n 'z-index': '-2',\r\n 'top' : '0px',\r\n 'position' : 'fixed',\r\n 'opacity' : '0.999999999'\r\n }\r\n ); \r\n } \r\n <\/script>\r\n<?php\r\n}\r\nadd_action( 'wp_footer', 'wp_full_bg' )\r\n?>\r\n<\/pre>\nThis wordpress plugin is quite simple. It defines a function wp_full_bg<\/code> which will be called by the wordpress system on the action wp_footer<\/code>. That’s what you can see in the final line of code. The actual code of the php-function is quite simply outputting the html and javascript.
\nThe first thing I do is create an image with a <img><\/code> tag.
\nNext I import the jQuery library from the Google CDN.
\nNow comes the real work: I use jQuery to wait for the document to be loaded. Then I call the javascript function fullbg<\/code>. I also set up a jQuery event handler to listen for changes in the size of the window with the resize<\/code> function.
\nIn the fullbg<\/code> function I first find the image and get it’s height and width. I do the same for the window. Then I use the size of the window to set to size of the image using an inline css style that I apply dynamically with the jQuery css<\/code> function. In between I make sure to keep the original aspect ratio of the image, and smartly resizing it to always fully fit the window.
\nIn the style, also the position and z-index are changed, so that the image is positioned underneath the content as a wallpaper or background.<\/p>\nI published the plugin on wordpress.org, so it should become available directly from the wordpress admin console soon. But if you can’t wait, you can download it here<\/a> or here<\/a> as well.<\/p>\n","protected":false},"excerpt":{"rendered":"I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[8],"tags":[],"class_list":["post-277","post","type-post","status-publish","format-standard","hentry","category-tinternet"],"jetpack_publicize_connections":[],"yoast_head":"\n
Full screen background \/ wallpaper plugin for wordpress - Appmire 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:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full screen background \/ wallpaper plugin for wordpress - Appmire blog\" \/>\n<meta property=\"og:description\" content=\"I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Appmire blog\" \/>\n<meta property=\"article:published_time\" content=\"2011-03-07T18:11:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-03-16T19:56:07+00:00\" \/>\n<meta name=\"author\" content=\"Jeroen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeroen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/\",\"url\":\"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/\",\"name\":\"Full screen background \/ wallpaper plugin for wordpress - Appmire blog\",\"isPartOf\":{\"@id\":\"https:\/\/jeroentrappers.be\/site\/#website\"},\"datePublished\":\"2011-03-07T18:11:42+00:00\",\"dateModified\":\"2011-03-16T19:56:07+00:00\",\"author\":{\"@id\":\"https:\/\/jeroentrappers.be\/site\/#\/schema\/person\/937cade782e684eb82e0ad8bf3e7806f\"},\"breadcrumb\":{\"@id\":\"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jeroentrappers.be\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Full screen background \/ wallpaper plugin for wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jeroentrappers.be\/site\/#website\",\"url\":\"https:\/\/jeroentrappers.be\/site\/\",\"name\":\"Appmire blog\",\"description\":\"www.appmire.be\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jeroentrappers.be\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jeroentrappers.be\/site\/#\/schema\/person\/937cade782e684eb82e0ad8bf3e7806f\",\"name\":\"Jeroen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jeroentrappers.be\/site\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f73f0c93a26301ab27fc60b560e31d39?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f73f0c93a26301ab27fc60b560e31d39?s=96&d=identicon&r=g\",\"caption\":\"Jeroen\"},\"sameAs\":[\"https:\/\/www.google.com\/accounts\/o8\/id?id=AItOawmXjGgZm3xAvfuje3MqTSlqYJRFFcUn9Pk\"],\"url\":\"https:\/\/jeroentrappers.be\/site\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Full screen background \/ wallpaper plugin for wordpress - Appmire 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:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Full screen background \/ wallpaper plugin for wordpress - Appmire blog","og_description":"I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is...","og_url":"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/","og_site_name":"Appmire blog","article_published_time":"2011-03-07T18:11:42+00:00","article_modified_time":"2011-03-16T19:56:07+00:00","author":"Jeroen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jeroen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/","url":"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/","name":"Full screen background \/ wallpaper plugin for wordpress - Appmire blog","isPartOf":{"@id":"https:\/\/jeroentrappers.be\/site\/#website"},"datePublished":"2011-03-07T18:11:42+00:00","dateModified":"2011-03-16T19:56:07+00:00","author":{"@id":"https:\/\/jeroentrappers.be\/site\/#\/schema\/person\/937cade782e684eb82e0ad8bf3e7806f"},"breadcrumb":{"@id":"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jeroentrappers.be\/site\/2011\/03\/07\/full-screen-background-wallpaper-plugin-for-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jeroentrappers.be\/site\/"},{"@type":"ListItem","position":2,"name":"Full screen background \/ wallpaper plugin for wordpress"}]},{"@type":"WebSite","@id":"https:\/\/jeroentrappers.be\/site\/#website","url":"https:\/\/jeroentrappers.be\/site\/","name":"Appmire blog","description":"www.appmire.be","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jeroentrappers.be\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jeroentrappers.be\/site\/#\/schema\/person\/937cade782e684eb82e0ad8bf3e7806f","name":"Jeroen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jeroentrappers.be\/site\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f73f0c93a26301ab27fc60b560e31d39?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f73f0c93a26301ab27fc60b560e31d39?s=96&d=identicon&r=g","caption":"Jeroen"},"sameAs":["https:\/\/www.google.com\/accounts\/o8\/id?id=AItOawmXjGgZm3xAvfuje3MqTSlqYJRFFcUn9Pk"],"url":"https:\/\/jeroentrappers.be\/site\/author\/admin\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1Ezsm-4t","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":11,"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/posts\/277\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jeroentrappers.be\/site\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}