Plugin, beproefd en in gebruik (check feb 2019)

Full screen background

plugin: Full Screen Background. Te downloaden op: http://www.trappers.tk/share/fullbg.zip .

NB: open fullbg.php in de plugin map en vul het adres in van het achtergrondplaatje, regel 18.

[php5 highlight=”18″] <!–?php <br ?–>/**
* @package Full screen background
* @version 0.6
*/
/*
Plugin Name: Full screen background
Plugin URI: http://www.trappers.tk/share/fullbg.zip
Description: Full screen background, like the google home page
Author: Jeroen Trappers
Version: 0.5
Author URI: http://blog.trappers.tk
*/

function wp_full_bg() {
?>
<!– Change the src attribute of the img tag just below here to point to the image you want to use. –>
<img id="wpfullbg" alt="" src="http://bataaf.nu/wp/wp-content/uploads/bg/ooijpolder3.jpg" />

<script type="text/javascript">// <![CDATA[
window.jQuery || document.write(‘<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"><\x3C/script>’)
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
jQuery(function() {
fullbg();
jQuery(window).resize(fullbg);
setTimeout(fullbg, 500);
});
function fullbg() {
var imgw = jQuery(‘#wpfullbg’).width();
var imgh = jQuery(‘#wpfullbg’).height();
var vpw = jQuery(window).width();
var vph = jQuery(window).height();

var imgratio = imgw / imgh;
var viewportratio = vpw / vph;

var w = vpw;
var h = vph;

if( viewportratio > imgratio )
{
// screen is wider than picture -> increase the heigth of the picture;
h = w / imgratio;
}
else
{
w = h * imgratio;
}

jQuery(‘#wpfullbg’).css(
{
‘left’: ‘0px’,
‘width’: w,
‘height’: h,
‘z-index’: ‘-2’,
‘top’ : ‘0px’,
‘position’ : ‘fixed’,
‘opacity’ : ‘0.999999999’
}
);
}

// ]]></script>
<!–?php <br ?–>}
add_action( ‘wp_footer’, ‘wp_full_bg’ );
?>
[/php5]

Klein scriptje; het kan ook zonder, zie: http://css-tricks.com/perfect-full-page-background-image/

Het kan ook via Weergave – Achtergrond, zie http://www.boerkoekoek.nl