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>\n
This 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>\n
I 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