I am working on an interesting task which is now turning into a headache.. any help greatly appreciated..
There are a few images on a website with height and width 500px each for the image container box and the images have various sizes less than 500px height and width. Now what I am trying to do is, get the images from the website and resize it to 200px height and width and display as 'background image' on container box on my HTML. I cannot do it manually as they are dynamic. I am able to achieve it on FF but I want it to work on all major browsers (IE 7,8,9, FF 3.6, 8.0, Chrome, Safari, Opera).
Below is the css that im using which is good for FF
Since older versions of Internet Explorer don't support all of those CSS properties, you can't do it with a background property. You could use layers with z-index to display your background images underneath your existing content so that you could have control over the image size and location. Good luck!
Hi, thanks for your reply. I am not supposed to use the <img> tags because of the load time issue as there are plenty of images loading. The z-index i see is for layering but I am not trying to do that. I am trying to display images individually from another website but resized to a smaller size. I am basically looking for an alternate property for background-size which is compatible with all browsers or a hack which would help resize images on older browsers cuz its working on new browsers with background-size property.
Whether you use an <img> tag or the background property doesn't affect loading time unless you're using sprites to share the image across mutliple elements.
The only cross-browser compatible method of resizing a background image would be to use a server-side script that could do the resizing before the image is sent to the user's browser. If you can't write one yourself, look for a thumbnail maker script. You should be able to easily modify it so that it will accept a size setting for width or height through a query string.