Geek Answers Handbook

Prevent scaling of background image when scaling or exiting user

I have this transparent bitmap overlay background: image link <- try scaling your browser to see the effect

When zooming in or out (especially on mobile devices, this happens very often), the image tends to look dirty and ugly. Is there a way that this background image is always 10 x 10 pixels in size on the screen, no matter how the page scales, so it always looks sharp?

While doing some searches, I found this to be a daunting task. In case this is not possible: is there a way to change the scaling filters so that the image looks better while reducing or decreasing?

+8
javascript jquery html css image
source share
1 answer

On the Hi-Res display, like the display of mobile devices, you will always have a blurry effect due to the high pixel density due to the high resolution on the small screen.

There is a workaround to fix this:

  • Create a background image with a double size: your image will be 10px 10px, instead create 20px 20px.

  • Apply the background image using the desired size: background-size: 10px 10px;

With this trick, when scaling or viewing an image on a high resolution display, the image will no longer be blurry.

As indicated in the comments, here is the code for resizing the background to increase:

JAVASCRIPT:

 if (window.addEventListener){ window.addEventListener('resize', setBackground, false); } else { window.attachEvent('onresize', setBackground); } function setBackground(){ document.body.style.backgroundSize = (((( window.screen.width / ( window.screen.width / getImageWidth() )) / 10) > 1 ) ? (( window.screen.width / ( window.screen.width / getImageWidth() )) / 10) : 1) + "%"; } function getImageWidth(){ var imageSrc = document .body .style .backgroundImage .replace(/url\((['"])(.*?)\1\)/gi, '$2') .split(',')[0]; var image = new Image(); image.src = imageSrc; var width = image.width; return width; }

HTML:

 <body onLoad="javascript:setBackground();" style="background: url(bkg.jpg) repeat;">
+1
source share

More articles:


All Articles