When creating a page, you sometimes need to insert a background image into the table. We can use CSS for control, Code : Style = "background-image: URL (./images/counter_bg.jpg); background-repeat: No-Repeat; Background-position: Right Bottom ;" ./Images/counter_bg.jpg indicates the path of the displayed image. How can we achieve this if we need to stretch the background image with the table without repeating it? Production method: Create a table and insert a filter of CSS in <Table>. Code: Style = "filter: progid: DXImageTransform. Microsoft. alphaimageloader (src ='', sizingmethod = 'Scale ')" However, this method only supports IE, and there is still a problem in IE6, that is, the hyperlink at the top of the background will be invalid and no good solution is found. If anyone finds this, leave a message. In addition, if you need other more complex effects, we recommend that you use layers to implement them, and use the Z-index attribute of the layer to implement them. This is almost omnipotent. Example: Flash background implemented by Layer <Div style = "position: relative"> <Embed style = "position: absolute; Z-index: 0 "src =" http://www.68design.net/art/images/flash/20061121001.swf "Quality = high width = 554 Height = 121 type =" application/X-Shockwave-flash "pluginspage =" http://www.macromedia.com/shockwave/download/index.cgi? P1_prod_version = shockwaveflash "wmode =" Opaque "> <A href = http://www.homelabel.cn/target = "_ blank" style = "cursor: Pointer"> <Div style = "position: relative; filter: alpha (opacity = 0);-moz-opacity: 0; left: 0; top: 0; Background: # cdeaf6; width: 554px; Height: 121px; Z-index: 10 "> </Div> </A> </Div>
Appendix: CSS background parameters, usage
serial number |
description |
markup syntax |
1 |
background color |
{background-color: Value} |
2 |
background image |
{ background-image: URL (URL) | none} |
3 |
duplicate background |
{background-repeat: Inherit | no-repeat | repeat-x | repeat-y} |
4 |
fixed background |
{background-Attachment: Fixed | scroll} |
5 |
background positioning |
{background-position: Value | top | bottom | left | right | Center} |
6 |
back style |
{Background: background color | background image | duplicate background | background attachment | background position} |
|