3

The background-image is just a simple pattern that looks best at 100%. Is there a way to prevent such a background-image from being resized when zooming the page?

laRana
  • 31
  • 1
  • 2

2 Answers2

0

zoom is browser feature and it's just enlarge everything you see in your browser so there is nothing you can do to keep the size of the images fixed

kleinohad
  • 5,800
  • 2
  • 26
  • 34
0

you could probably try pulling in an image into your HTML document instead:

<div id="bg-img">
    <img src="images/bg-img.jpg">
</div>

then going on to your CSS, you could apply the following style to that div holding the image:

#bg-img{
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-4;
 }

the above style set will set your image to fit nicely into any browsers and prevent the background-image from resizing or expanding up to about 3 times of the zoom. be sure to fill in the appropriate value for the min-width so that in the event that the browser is resized, the image will maintain the correct proportion by resizing or cropping off.

vynx
  • 1,269
  • 1
  • 12
  • 20
  • 1
    how does it not work on chrome and safari? as in what errors are occurring in the two browsers? ive applied the similar method to a couple of sites and there are working fine regardless of the browser type.. so unless you can specify the problem, it'll be pretty difficult to debug. – vynx Jul 18 '11 at 10:14
  • a sample of your current codes after the revisions would also be good :) – vynx Jul 18 '11 at 10:15