ThemeShaper Forums » Thematic

[closed]

Background image stretch to fit browser size

(9 posts)
  • Started 4 years ago by willforsyth
  • Latest reply from willforsyth
  • This topic is not resolved
  1. Hi

    I am having a few problems getting my background image to stretch to fit the browser window when scaled etc.

    I am using the css - trick method here is an example http://css-tricks.com/examples/ImageToBackgroundImage/.

    The problem I am having is for this method to work the background image can not be inserted into the body tag of the CSS, it has to be inserted into the HTML and then style though img tag in css.

    I have tried inserting a img into the thematic body function THEMATIC_BEFORE() hook so i can then add the css but it dosnt insert the img into the background, it inserts it into top of page.

    Anyone have any ideas?

    Posted 4 years ago #
  2. maybe you should try the jquery plugin discussed here: http://forums.themeshaper.com/topic/how-to-add-jquery

    i am not familiar w/ the css trick you are talking about. just for my reference do you have a link to a post describing it?

    Posted 4 years ago #
  3. yeah I use it when I am making none wordpress sites.

    here is the link

    http://css-tricks.com/how-to-resizeable-background-image/

    Posted 4 years ago #
  4. you can't "insert" an image into the background. in their demo they have an IMG tag appearing in the body content... and then it is the CSS that makes the effect work.

    you said you already tried this, but here is the code to insert the image

    function bgimage(){ ?>
    <img id="background-img" class="bg" src="http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg" alt="" />
    <?php }
    add_action('thematic_before','bgimage');

    and here is the css

    .bg {
    	width: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -5;
    }

    the absolute positioning is what keeps it from pushing everything else down. I had to lower the z-index as their example has a z-index of 3 or 5000 and so it was covering up all the content. the example also has an overflow:hidden on the body tag, but if you have any content this will cut it off, so i didn't add that either, but now it looks weird when you scroll down and the image ends since you can't set it to be 'fixed' like you could a background image.

    Posted 4 years ago #
  5. yeah same i got to the point where it was in the background on second try but it still didnt stretch to fit the browser window.

    Goin to give it a third when I've had a break.

    Posted 4 years ago #
  6. initialsbr
    Member

    I've been struggling with this issue for a long time and tried the method you link to. This is a newer alternative on the same site that appeared to satisfy my needs better...

    http://css-tricks.com/perfect-full-page-background-image/

    I posted this thread to help with my problems but couldn't get any assistance...

    http://forums.themeshaper.com/topic/auto-resize-background-image

    After what's written there, I wrote functions to insert divs before and after the content like it suggests. But that didn't work.

    Hope we can figure this out.

    Posted 4 years ago #
  7. still had no luck.

    Posted 4 years ago #
  8. Technique 2 works perfectly. Even better than the jquery technique that was posted in another thread.

    function my_background() { ?>
    <?php echo '<img class="bg" src="' . get_bloginfo('stylesheet_directory') .'/images/wallpaper.jpg" alt="photo"  />';
    ?>
    
    <?php
    
    }
    add_action('thematic_before', 'my_background');

    then for the CSS rules where they have rules for the #content div, use #wrapper instead.

    Posted 4 years ago #
  9. I am so glad your around to help.

    I am going to try this over the weekend.
    Just crashed my wordpress install with bad function code. got no ftp access at work.

    thanks again

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.