Skip to:
Content
Pages
Categories
Search
Top
Bottom

need help stretching background image in IE

  • Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    Greetings,
    I’m building my own child theme, based on the BP default theme. I need to have a background image that’s stretched 100% width/height. It works fine in Chrome and Firefox, but in the latest version of IE, the image just sits in the center, at its original size. No stretching takes place. Here is the CSS I’m using, which is based directly in the default theme CSS:

    body {
    background-color: #000000;
    background-image: url(images/DSC09005cc.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #555;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana, sans-serif;
    line-height: 170%;
    max-width: 1250px;
    margin: 0 auto;
    width: 95%;
    }

    Thank you in advance.
    Dima

Viewing 12 replies - 1 through 12 (of 12 total)
  • Avatar of mattg123
    mattg123
    Participant

    @mattg123

    whenever i use a static background that requires stretching i use http://srobbin.com/jquery-plugins/backstretch/ it works in ie, which versions im not sure

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    Thanks. I’ve never implemented jQuery before, but I may resort to learning it if I can’t figure this out.
    D

    Avatar of mattg123
    mattg123
    Participant

    @mattg123

    its quite easy, wp_register_script wp_enqueue_script will be what your looking for

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    I have no idea what that means :). I am rather new to this, I’m afraid.

    Avatar of mattg123
    mattg123
    Participant

    @mattg123

    alright well here, your code should look like this

     function backstretch_script() {
     
    		wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/_inc/js/backstretch.js', 'jquery', '1.8.3', true);
            wp_enqueue_script( 'backstretch' );
        
    }
    add_action( 'wp_enqueue_scripts', 'backstretch)script' );

    the get_stylesheet_directory_uri refers to where you’ve put backstretch.js, so you may need to change that. Once you’ve added that code you can then use wp_footer(); to use the plugin like so

    
    	function backstretch_add() {
    ?>
            <script type="text/javascript">
                jQuery.backstretch("<?php echo get_stylesheet_directory_uri()?>/_inc/images/background.jpg");
            </script>
    <?php
    	}
    add_action ('wp_footer', 'backstretch_add', 20);
    

    note – you’ll have to change the code between “” to use your image

    hope that helps @diabolique65

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    Matt, thanks very much. That’s good of you. I’m afraid this is over my head, though. Can you point me to an online tutorial that can give me the basics before I attempt this myself?

    Avatar of mattg123
    mattg123
    Participant

    @mattg123

    No need…. I’ll just explain it slightly better you’re using a buddypress child theme, so you need to create a folder inside _inc called “js”. For me, this holds all my javascript files in this case, you’ll put backstretch.js here (make sure the name is backstretch.js)

    Next step is putting the background image in the folder _inc as well, place your image inside “images” within _inc, name it background.(whatever)

    Now we need to add the code so that wordpress uses these files – we can add it to our functions.php

    function backstretch_script() {
     
    		wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/_inc/js/backstretch.js', 'jquery', '1.8.3', true);
                    wp_enqueue_script( 'backstretch' );
        
    }
    add_action( 'wp_enqueue_scripts', 'backstretch_script' );
    
    	function backstretch_add() {
    ?>
            <script type="text/javascript">
                jQuery.backstretch("<?php echo get_stylesheet_directory_uri()?>/_inc/images/background.jpg");
            </script>
    <?php
    	}
    add_action ('wp_footer', 'backstretch_add', 20);

    add that code as is – you may want to change the .jpg to .png or whatever file type your image is.

    If for some reason you don’t want to place backstretch.js or your background image in those folders, you’ll need to modify these two lines to the new location.

    wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/_inc/js/backstretch.js', 'jquery', '1.8.3', true);
    jQuery.backstretch("<?php echo get_stylesheet_directory_uri()?>/_inc/images/background.jpg");

    Hopefully that’s slightly clearer

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    Thank you so much!

    Where does this code go?:

    wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/_inc/js/backstretch.js', 'jquery', '1.8.3', true);
    jQuery.backstretch(&quot;<?php echo get_stylesheet_directory_uri()?>/_inc/images/background.jpg&quot;);
    Avatar of mattg123
    mattg123
    Participant

    @mattg123

    those two lines were “IF” you changed the locations of the javascript file and the image – if you placed them in the folders that i mentioned, you won’t need to modify those lines at all

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    Very good. I’ll try this tomorrow and let you know.
    Cheers,
    D

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    It worked!
    Thank you very much, Matt!
    Cheers,
    Dima

    Avatar of diabolique65
    diabolique65
    Participant

    @diabolique65

    Appreciate all your help!

Viewing 12 replies - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.