When creating a website, we sometimes need to fill some tables with the background image gradient,
However, because the size of the content in the table is not fixed, sometimes the content is too long, there is no background in the open area of the table, sometimes the content is too short, and not all the background images are displayed, failed to achieve the expected results.
Is there a way to enable automatic background scaling to always display all gradient colors, achieving a tile-like effect?
The answer is yes of course. A powerful CSS filter can be implemented, but unfortunately Firefox does not support it. In today's popular Firefox, this seems a bit uncomfortable.
If you do not have high requirements for this method, you can refer to the following filter code.
Code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Adaptive Background Image Size Using CSS </title>
</Head>
<Body>
& Lt; table width = "200" & gt;
<Tr> <TD style = "filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = 'HTTP: // www.phperz.com/templets/image/menu2_bg.png', sizingmethod = 'Scale'">
<P> adaptive size of background images </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P> </TD> </tr> </table> phperz.com
<P> original image size </P>
</Body>
</Html>
Note: When a filter is used, the button link after the filter may not work. The solution is to set the position attribute of the button link to the relative position of the relative.