PDA

View Full Version : background images on css scrollers


155
05-16-2006, 08:55 PM
i have a background image in my css scroller but when you scroll it moves the background image with it. i want the background image to say still. here is the css code i have #Scroller {
position:absolute;
left:50%px;
top:263px;
width:481px;
height:300px;
overflow: auto;
background: #CCCCCC;
padding: 5px;
background-image: url(images/index_06.gif);
}

ranjan
05-16-2006, 09:08 PM
#scrollerHolder {
position:absolute;
left:50px;
top:263px;
width:481px;
height:300px;
background: #CCCCCC;
background-image: url(images/index_06.gif);
}
#scroller {
overflow: auto;
padding: 5px;
width:481px;
height:300px;
}

HTML
<div id="scrollerHolder"><div id="scroller">blah</div></div>

Edit: Please check if CSS property background-position:fixed works in IE 6. If it does use it and ignore above code

domedia
05-16-2006, 09:20 PM
It's background-attachment

background-attachment: fixed

155 all you need to do to your code is ad the one line above.

155
05-16-2006, 11:09 PM
looks perfect in IE.. poopy in firefox :evil:

domedia
05-16-2006, 11:36 PM
looks perfect in IE.. poopy in firefox :evil: Can you explain :P

155
05-17-2006, 01:38 AM
yup.. www.onefivefive.com/155/index.html look at it in IE then firefox... that background image in the css isnt line up in the css scroller in firefox

ranjan
05-17-2006, 03:18 AM
Documents (1 file) 8 kb
http://www.onefivefive.com/155/index.html 8 kb
Images (20 files) 195 kb
http://www.onefivefive.com/155/images/index_01.gif 102 kb
http://www.onefivefive.com/155/images/index_06.gif 14 kb
http://www.onefivefive.com/155/images/index_18.gif 12 kb
http://www.onefivefive.com/155/images/index_10.gif 8 kb
http://www.onefivefive.com/155/images/index_19.gif 6 kb
http://www.onefivefive.com/155/images/index_02.gif 6 kb
http://www.onefivefive.com/155/images/index_07.gif 6 kb
http://www.onefivefive.com/155/images/index_05.gif 5 kb
http://www.onefivefive.com/155/images/index_08.gif 4 kb
http://www.onefivefive.com/155/images/index_16.gif 4 kb
http://www.onefivefive.com/155/images/index_03.gif 4 kb
http://www.onefivefive.com/155/images/index_12.gif 4 kb
http://www.onefivefive.com/155/images/index_14.gif 4 kb
http://www.onefivefive.com/155/images/index_17.gif 4 kb
http://www.onefivefive.com/155/images/index_11.gif 3 kb
http://www.onefivefive.com/155/images/index_15.gif 3 kb
http://www.onefivefive.com/155/images/index_09.gif 1 kb
http://www.onefivefive.com/155/images/index_04.gif 1 kb
http://www.onefivefive.com/155/images/index_13.gif 754 bytes
http://www.onefivefive.com/155/images/spacer.gif 406 bytes
Style Sheets (1 file) 251 bytes
http://www.onefivefive.com/155/scroller.css 251 bytes
Scripts (0 files)
Total 204 kb

204 kb document is huge!

155
05-17-2006, 01:12 PM
then what do i do?

155
05-17-2006, 06:51 PM
how can i fix this? in IE the background is lined up perfect in the css scroller. but in firefox.. its wayy off. look at www.team.onefivefive.com/riders.html look at it under IE then firefox... pleaseee help :cry:

domedia
05-17-2006, 07:48 PM
Actually look good to, but validate the stylesheet, fix the errors in your scroller.css and see if that helps.
left:50%px;

155
05-17-2006, 09:10 PM
what should i change 50%px too?

155
05-17-2006, 09:17 PM
its just like iframes... you cant line it up perfect in both browsers... 25% to the left looks perfect in IE but wayyy off in firefox... i hate firefox

domedia
05-18-2006, 12:08 PM
If you knew some html/css you would be much better fof :)
a CSS value can't be percentage and pixels and teh same time, either choose %, px, em etc, but not twp slammed together. Site still looks good to me in both IE and FF, are you sure you're seeing something wrong?

dthomsen8
05-18-2006, 04:24 PM
Add a DOCTYPE and check your HTML at www.w3.org for validation.

Things like mixed units would be reported there. If you don't know about a DOCTYPE statement, it is the first line of your HTML. Google DOCTYPE.

View>Source with the browser to see one on this site, for example.