glopal Posted July 9, 2009 Share Posted July 9, 2009 Hello,I am using a jpeg as a background-image that I tile along the x. It adds some texture to the background I feel. Anyways, one thing I have noticed, if I use my browser to zoom out (Ctrl + scroll with mouse), the image scaling produces some ugly effects. Is there a way to prevent the image from scaling? body{ background-image:url('../images/bgLines.jpg'); background-repeat:repeat-x; margin: 0; padding: 0; background-color:#E8E8E8; text-align:center;} The address for the website is http://www.goldenlinks.mb.caClick on "Design Preview"When prompted, the login is:User name: UserPassword: qw3rtii7The user name is case-sensitive, make sure to capitalize the 'U.'-- Mike Link to comment Share on other sites More sharing options...
glopal Posted July 13, 2009 Author Share Posted July 13, 2009 So I noticed that a "bug" in IE7 is producing the desired effect I want across the browser board. IE7 for some reason doesn't zoom background-images. Is there no way to get that effect in firefox?I did find this: http://css-tricks.com/how-to-resizeable-background-image/That is essentially what I want, except it doesnt seem to work with a repeating background-image. Link to comment Share on other sites More sharing options...
Ingolme Posted July 13, 2009 Share Posted July 13, 2009 It does not work with repeating background image, because it's not a background image at all. It's a normal image that is placed behind the other content with CSS. Link to comment Share on other sites More sharing options...
glopal Posted July 14, 2009 Author Share Posted July 14, 2009 Alright, so I ditched the background-image, applied the style to the img, and it works. The only snag is that the height has to be a percent. So say my viewport height is 600px, and the image height is 300px, the height has to be 50%. This seems manageable through javascript though, I found some cross browser code to find the viewport width and height.But, before I try implementing the javascript, I want to make sure this background image works in all browsers.Works in firefox, surprisingly works in IE6... but it doesnt work in IE7?!If you have IE7 running on your computer, take a look at this as an example of what happens.CSS body{ margin: 0; padding: 0; background-color:#E8E8E8; text-align:center; overflow: hidden;}#bg{ width: 100%; height: 53%; position: absolute; top: 0; left: 0; z-index:1;} Cross browser development is a pain. I don't have IE 8 on my machine right now, if someone could take a look at that link above and tell me if the rabbit image stays put as you zoom in and out with ctrl + scroll. If it works in IE 8, I might just use the repeating background-image for IE 7.... using conditional comments? Or maybe using document.write to insert the <img> only if its not IE7. I dunno, I'll figure something out. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.