Background image stretch to fit browser size

ThemeShaper Forums » Thematic

[closed]

Background image stretch to fit browser size

(9 posts)

Started 14 years ago by willforsyth
Latest reply from willforsyth
This topic is not resolved

Tags:

willforsyth
Member

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 14 years ago #
helgatheviking
Moderator

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 14 years ago #
willforsyth
Member

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 14 years ago #
helgatheviking
Moderator
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 14 years ago #
willforsyth
Member

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 14 years ago #
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 14 years ago #
willforsyth
Member

still had no luck.

Posted 14 years ago #
helgatheviking
Moderator
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 14 years ago #
willforsyth
Member

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 14 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.