md0333
asked on
Resizing background image
I have a footer image I want to use but I want the width to resize to the screen width. I have the resizing working but in order to resize it as an image I had to put it in an <img> tag so I could give it an id which then made it a control... and now I can't put text on top of it.
What am I doing wrong here??
Thanks!
What am I doing wrong here??
Thanks!
<div id="footerdiv" class="footer" >
<img src="/Images/footer.png" width="100%" alt="background image" id="bg" onload="resizeImg(this)" />
<p>
<asp:Label ID="Label1" runat="server" Text="Corporate Information" Font-Underline="false"
Font-Size="Small" ForeColor="#4e5766" />
</a>  |  
<asp:HyperLink runat="server" ID="hlTOS" Style="text-decoration: none" NavigateUrl="~/TOS.aspx"
ForeColor="#4e5766" Text="Terms of Service" />
  |  
<asp:LinkButton runat="server" ID="lnkLogout" Style="text-decoration: none" OnClick="Logout"
Text="Logout" ForeColor="#4e5766" />
</p>
</div>
<script type="text/javascript">
window.onload = function () {
window.onresize = function () { resizeImg(document.getElementById('bg')); }
}
var availWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
function resizeImg(img) {
img.style.width = availWidth + "px";
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I got it! I just created a second <div> tag for the image using the same css class as the footer. Having the z-index="-1" pushedi it behind.
Perfect!
Thank you!
Perfect!
Thank you!
Cool! Glad it worked :-)
ASKER
I tried putting the image as a background image of the <div> but then, while I can get the <div> to resize, I can't get the image to resize because I don't have an ID for the image.