Stretching of background images in HTML

Source: Internet
Author: User

The HTML background is sometimes changed because of the browser size (this "change" is repeat). How to stretch it? I 've been checking it online for a long time, I found a good thing called "filter", and the effect was achieved-the background was scaled with the browser size, but the links on the page were all invalid. I don't know why, so I should put it here first, after all, only ie5.5 + can be used, and later I understand the continued writing.

(From http://blog.csdn.net/birdwindy/archive/2007/11/14/1884428.aspx)

Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled =Benabled, Sizingmethod =Ssize, Src =Surl),

Attribute:

Enabled : Optional. Boolean ). Set or retrieve whether the filter is activated.True|False

True : Default Value. Filter activation.
False : The filter is disabled.
Sizingmethod : Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container.

Crop : Cut the image to fit the object size.
Image : Default Value. Increase or decrease the size boundary of an object to fit the image size.
Scale : Scale the image to adapt to the size boundary of the object.
SRC : Required. String ). Use absolute or relativeURLThe address specifies the background image. If this parameter is ignored, the filter will not work.
Features:

Enabled : Read/write. Boolean ). SeeEnabledAttribute.
Sizingmethod : Read/write. String ). SeeSizingmethodAttribute.
SRC : Read/write. String ). SeeSRCAttribute.
Note: An image is displayed between the background and content of the object within the boundary of the object container. You can also cut and change the size of the image. If the file is loaded in PNG (Portable Network Graphics) format, the transparency between 0% and 100% is also provided.
The transparency of images in PNG (Portable Network Graphics) format does not affect your choice of text. That is to say, you can choose to display the content after the completely transparent area of images in PNG (Portable Network Graphics) format. Example: # iddiv {position: absolute; left: 140px; Height: 400; width: 400; filter: progid: dximagetransform.microsoft.alphaimageloader(src='rain1977.gif ', sizingmethod = 'Scale ');}
. Dream {filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = 'images/earglobe.gif ');} msdn: http://msdn2.microsoft.com/en-us/library/ms532969.aspx

P.s. When you want to use the backgroundimage attribute, You can implement this filter if you do not want to display the original image size, but like IMG width = 100% heigth = 100%.

Example:
Span. style. Filter = "progid: dximagetransform.microsoft.alphaimageloader(src='test.jpg ', sizingmethod = 'Scale ')";

Reference: Finally, let's talk about the effect reconciliation between FF and IE. This filter effect is only applicable to IE and cannot be displayed under ff. I think this is the final problem that the predecessor said he was hard to implement. In the past, we used * or _ to fix the difference between IE and ff. This time we were looking for a way to fix the problem that FF could not be implemented.
In fact, it is easy to think. let FF display the image normally first, then use * or _ to clear the display effect under IE, and finally use * or _ to do the above filter effect. Success!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.