Solved

Resizing background image

Posted on 2011-03-23
4
618 Views
Last Modified: 2012-05-11
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!

    <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>&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" />
        </p>
        
    </div>

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


    </script>

Open in new window

0
Comment
Question by:md0333
  • 2
  • 2
4 Comments
 
LVL 11

Accepted Solution

by:
Akenathon earned 500 total points
ID: 35202749
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
0
 

Author Comment

by:md0333
ID: 35202858
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.
0
 

Author Comment

by:md0333
ID: 35202890
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!
0
 
LVL 11

Expert Comment

by:Akenathon
ID: 35203003
Cool! Glad it worked :-)
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Summernote and form validation 10 42
Hangfire / asp.net sample 3 28
JDeveloper 12c for 32 bit 4 34
What does this javascript do? 7 24
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now