Jump to content

Preventing Background-image From Scaling


glopal
 Share

Recommended Posts

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

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.

Edited by glopal
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...