I want to be able to resize this table background image with javascript i also do not want it to repeat when it gets bigger
<table name="bgImgBlue" id="bgImgBlue" width="100%" width="100%"width="100%"style="position:absolute;top:0px;left:0px;
z-index:99;" cellpadding="0" cellspacing=开发者_如何学Python"0" width="100%" background="images/i_frame_bgnav.gif" HEIGHT="184">
Bakckground no repeat
Take reference to image out of the property, and into the CSS (also make CSS external is better practise):
style="position:absolute;top:0px;left:0px;background-image:url('images/i_frame_bgnav.gif');background-repeat:no-repeat;
The no repeat function will stop it repeating. Alternative values for this are 'repeat-x
' and 'repeat-y
'.
Better HTML
Try and avoid tables, use div's instead. These are easier to resize, and tables are pretty old school now. Netherless, to resize your table's height:
<script language="JavaScript">
var myTable = document.getElementById("bgImgBlue");
myTable.width = 300;
myTable.height = 1000;
</script>
First off, the modern thing is to use CSS for the whole thing:
table#bgImgBlue
{
width: 100%;
position:absolute;
top:0px;
left:0px;
z-index:99;
height: 184px;
background-image: url("images/i_frame_bgnav.gif");
}
...
<table id="bgImgBlue">
resizing a background image is possible only in CSS3, and not supported across all browsers yet. You may have to resize the original image on the server instead.
You can disable repeating the background image using
background-repeat: no-repeat;
精彩评论