• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 631
  • Last Modified:

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??


    <div id="footerdiv" class="footer" >
        <img src="/Images/footer.png" width="100%" alt="background image" id="bg" onload="resizeImg(this)"  />
           <asp:Label ID="Label1" runat="server" Text="Corporate Information" Font-Underline="false"
                    Font-Size="Small" ForeColor="#4e5766" />
            </a>&nbsp | &nbsp
            <asp:HyperLink runat="server" ID="hlTOS" Style="text-decoration: none" NavigateUrl="~/TOS.aspx"
                ForeColor="#4e5766" Text="Terms of Service" />
            &nbsp | &nbsp
            <asp:LinkButton runat="server" ID="lnkLogout" Style="text-decoration: none" OnClick="Logout"
                Text="Logout" ForeColor="#4e5766" />

Open in new window

<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";


Open in new window

  • 2
  • 2
1 Solution
Throw it behind the rest of the page if you want to put text over it:

<img src="/Images/footer.png" width="100%" alt="background image" id="bg" onload="resizeImg(this)" style="position:relative; z-index:-1" />

See http://www.w3schools.com/Css/pr_pos_z-index.asp and http://www.w3schools.com/Css/css_positioning.asp
md0333Author Commented:
didn't work for my use... I have my footer stuck to the bottom of the viewable area. Your example worked in that it put the image at the bottom of the page but then the user had to scroll down. I have it right now so that the header and footer <div> stay where they are and the rest of the page scrolls (if needed). If I use your code inside the <div> tag I get no change in usability.

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.
md0333Author Commented:
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.


Thank you!
Cool! Glad it worked :-)

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now