[css-d] Background Image Position Problems--Do You Have a Work Around?
Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I have been just positioning the image downward in the past but that is a bad solution because it makes the image look bad in some browsers. My main troubles are in IE5, 5.5, and 6 and Safari. It appears to look just fine in IE 7 Firefox. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. I am using Firefox 2.0.0.4 and I do my coding in TopStyle Pro (so all mistakes are mine and I cannot blame them on any other source). I have my screen res set at 1024 x 768 (because it seem like a popular size). Thanks for any help you have on this cross browser vexation. -- Fabienne Christenson My Website: http://www.possets.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Fabienne Christenson My Website: http://www.possets.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image Position Problems--Do You Have a Work Around?
Fabienne wrote: Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. Try background:#FF url(../images/possetsgirl800w.jpg) no-repeat fixed left bottom; or background:#FF url(../images/possetsgirl800w.jpg) no-repeat fixed 0 100%; This will fix the background to the bottom of the viewport, which might be below the bottom of the page at higher resolutions. When you use fixed units like pixels, the top left of the image is put at that point in the containing box, which is basically the viewport in your case. But if you use percentages, a point in the image at the specified percentages is matched to the same point in the containing box. So, for example, if you specify 10% 20% as the percentages, a point 10% across and 20% down in the image is matched to the point 10% across and 20% down in the containing box. You might try playing with percentages as well to see if they provide the effect you want. Setting the horizontal percentage (the first value) to 50% will centre the image in the containing box. HTH Lori __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background Image Position Problems
Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I have been just positioning the image downward in the past but that is a bad solution because it makes the image look bad in some browsers. My main troubles are in IE5, 5.5, and 6 and Safari. It appears to look just fine in IE 7 Firefox. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. I am using Firefox 2.0.0.4 and I do my coding in TopStyle Pro (so all mistakes are mine and I cannot blame them on any other source). I have my screen res set at 1024 x 768 (because it seem like a popular size). Thanks for any help you have on this cross browser vexation. -- Fabienne Christenson My Website: http://www.possets.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background Image Position Problems
Hello, all. I am creating a Zen Cart for my store and have put an image in the background of my pages. The webpage is found here: http://www.possets.com/zen-cart and the CSS can be found here. http://www.possets.com/zen-cart/includes/templates/magic/css/stylesheet.css In some browsers, the image looks great. In other browsers the background images are drifting up too high and show the bottom being cut off and it's unattractive. I have been just positioning the image downward in the past but that is a bad solution because it makes the image look bad in some browsers. My main troubles are in IE5, 5.5, and 6 and Safari. It appears to look just fine in IE 7 Firefox. I want to be able to position the image in the background and have it look good in IE6, 5.5, and 5 at least, so the image bottom sits on or below the bottom of the page. I am using Firefox 2.0.0.4 and I do my coding in TopStyle Pro (so all mistakes are mine and I cannot blame them on any other source). I have my screen res set at 1024 x 768 (because it seem like a popular size). Thanks for any help you have on this cross browser vexation. Please note: I tried to send this message to the list earlier today but it did not look as if it was received. If it turns up twice on the list, I apologize. My intention was not to duplicate questions to the list. I also looked at the Public area on the website to see if this message turned up in the last 40 messages and it had not, so I thought it safe to resend. -- Fabienne Christenson My Website: http://www.possets.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
