Support » Fixing WordPress » centering fluid background image? css/jquery

  • foreman23

    (@ynovalisyahoocom)


    Sorry if this is super basic (first time in the forums, setting up a site for a nonprofit) but I’ve tried a bunch of different plugins, searched for a while, and can’t quite get any to do what I want with the theme I purchased.

    What I’m after is simply this: add one background image to the entire site that is vertically aligned to the top and horizontally centered, regardless of browser size. I do not want the image to resize, any horizontal excess can just be hidden.

    The theme I’m using is Accende, by wpaddicts, which had the built in wordpress background support disabled. I tried enabling that, but the image didn’t show up (some other code over-riding?) so I started trying various plugins. Here’s the plugin/code I’ve been messing with:

    <?php
    /**
     * @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" src="http://www.peterandjohn.org/wp-content/uploads/2013/01/site-wallpaper.jpg" >
    
       <script>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">
         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 height of the picture;
             h = w / imgratio;
           }
           else
           {
             w = h * imgratio;
           }
    
           jQuery('#wpfullbg').css(
              {
                 // 'left': '0pt',
                 'align': 'center',
                 'width': 1903,
                 'height': 995,
                 'overflow': 'hidden',
                 'z-index': '-2',
                 'top' : '0px',
                 'position' : 'fixed',
                 'opacity' : '0.999999999'
              }
           );
         }
       </script>
    <?php
    }
    add_action( 'wp_footer', 'wp_full_bg' );
    ?>

    Any help is greatly appreciated, thank you! Website is peterandjohn.org

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you identify to us the background image you want this applied to?

    foreman23

    (@ynovalisyahoocom)

    sure, it’s in the above code as ‘site-wallpaper.jpg’

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I’d use a background image for something like this.

    foreman23

    (@ynovalisyahoocom)

    I tried that but must’ve done something wrong.
    All I should have to do is paste the css background image code into the main stylesheet with the first occurence of the body tag as below, right?

    /* ===== 1. General & Common Styles  ========= */
    body{position:relative;
    background-image : url('http://www.peterandjohn.org/wp-content/uploads/2013/01/site-wallpaper.jpg');
    background-repeat : no-repeat;
    background-position : 50% 50%;
    background-attachment : fixed;
    color : #000000;
    margin : 0;
    }
    foreman23

    (@ynovalisyahoocom)

    Or do i need to then go to the appropriate php templates and call the background image in?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    No Foreman, you don’t need to go to the appropriate php templates. What you’ve done, applied to the body in the CSS, is correct.

    You probably can’t see it working because that Full Screen Background plugin is covering it. Try disabling that.

    foreman23

    (@ynovalisyahoocom)

    Man, not sure what’s up then. I disabled the plugin but then the background image disappeared altogether, even with that code in the css body tag :/

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Your CSS says you have this as the body background image;

    http://www.peterandjohn.org/wp-content/themes/accende/images/background/.jpg

    So you’re missing the file name, all you have is the file extension (.jpg).

    foreman23

    (@ynovalisyahoocom)

    Alright, I was able to find the code that was referring to in the header.php file, so I fixed that and the background image is back.

    However, it still isn’t staying horizontally centered when I resize the browser window…trying to figure that out now.

    <body id="top" <?php body_class(); ?> style="background: url(http://www.peterandjohn.org/wp-content/uploads/2013/01/site-wallpaper.jpg) repeat 0 0;">

    >> peterandjohn.org

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘centering fluid background image? css/jquery’ is closed to new replies.