...

View Full Version : Background-image disappears when scrolling



bergy
05-31-2010, 04:27 PM
Hi all,

I have started designing a website and am using Artisteer template maker for Joomla CMS.

I wanted to add an image to the website that stays in the bottom left hand corner of the page, even if the page gets scrolled. Unfortunately all my coding attempts failed to achieve the desired outcome. I managed to get the image to stay in the bottom left corner, however once you start scrolling it starts disappearing (as if something is covering it). To see what I mean please have a look at www.vonstrom.com.

I have seen that others had a similar problem as well, but their suggested fixes don't seem to work on my site! There may be an obvious fix, but I just can't see it, and it's starting to drive me crazy!!! :confused:

Any help you could give me would be greatly appreciated!

Thank you so much!!
Bergy

Kor
05-31-2010, 04:39 PM
You should give your element there a position fixed, not a position absolute.


.bg-tulip-png {
background-attachment:fixed;
background-image:url(../images/Tulip.png);
background-position:left bottom;
background-repeat:no-repeat;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:-1;
}

bergy
05-31-2010, 05:26 PM
Thanks for the quick reply Kor! :)

I changed position to fixed, but it didn't do very much. I then changed the position of div-tag in my index.php file and I managed to keep most of the image. But still, now if you scroll all the way down, the bottom of the image is sliced off... what's causing that?

bergy
05-31-2010, 05:30 PM
It's all fixed now! I still had padding value that didn't belong! Thank you!! :D

abduraooft
05-31-2010, 05:31 PM
You might need something like
.bg-tulip-png {
background-attachment:fixed;
background-image:url("../images/Tulip.png");
background-position:left bottom;
background-repeat:no-repeat;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:10;
} ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum