WordPress.org

Ready to get started?Download WordPress

Forums

centering fluid background image? css/jquery (10 posts)

  1. foreman23
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. foreman23
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. foreman23
    Member
    Posted 1 year ago #

    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;
    }
  6. foreman23
    Member
    Posted 1 year ago #

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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  8. foreman23
    Member
    Posted 1 year ago #

    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 :/

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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).

  10. foreman23
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic