Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    67
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Auto-Resizing 'Background'

    I'm trying to achieve a 'background' that will automatically resize itself based on the user's resolution, or browser window size. The method I'm currently using just makes an image behind the actual content and resizes it to 100%. It looks fine in Mozilla Firefox, but everything is shoved to the right in IE7. I haven't had the opportunity to test it in IE6.

    Here's the CSS used:
    Code:
    #bg_image {
    	width: 100%;
    	height: 100%;
    	left: 0px;
    	top: 0px;
    	position: fixed;
    	z-index: 0;
    }
    
    #contents {
    	z-index: 1;
    	position: absolute;
    }
    And corresponding HTML:
    Code:
    <div id="bg_image">
    <img src="http://www.technologisticsforums.com/style_images/vista/bgs/Aurora.jpg" style="width: 100%; height: 100%;">
    </div>
    
    <div id="contents">
    { Stuff }
    </div>
    I'm currently using it even though it screws up in IE7. Here's a live example: http://www.technologisticsforums.com/.

    Any suggestions as to fixing the issue would be greatly appreciated.

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have similar issues, and I cannot believe automatic background resizing isn't a standard feature.

    Try resizing the image with javascript, as in

    Code:
    <script>
    function windowWidthMinusScrollBar () {
    if (typeof window.innerWidth != "undefined") return window.innerWidth
        else if (document.documentElement && typeof document.documentElement.offsetWidth != "undefined" && document.documentElement.offsetWidth != 0) return document.documentElement.offsetWidth
        else if (document.body && typeof document.body.offsetWidth != "undefined")    return document.body.offsetWidth
    }
    
    BGImage.style.width = windowWidthMinusScrollBar+'px';
    Write a similar code for the window height. Let me know if this works out.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its supposed to be standard in CSS3 but that won't be out fully for a while. It can be done without javascript. Coolcamo you are on the right track. Here is an example that shows how it is done.
    http://www.cssplay.co.uk/layouts/background.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, you can always just do
    Code:
    body {margin: 0}
    inside the CSS. I had that same problem once, and that's how I fixed it. Also, I tried it with yours, and it worked.

  • #5
    New Coder
    Join Date
    Jun 2006
    Posts
    67
    Thanks
    20
    Thanked 0 Times in 0 Posts
    I took the example that Aerospace_Eng posted and changed some things around. I now have:
    Code:
    #background{position:top left absolute; z-index:1; width:100%; height:100%;}
    #scroller {position:fixed; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
    #content {padding:0px 0px 0px 0px;}
    
    body{
    	color: #222;
    	font-family: "Segoe UI", Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, Times New Roman, Serif;
    	font-size: 11px;
    	line-height: 100%;
    	overflow:hidden;
    	width:100%;
    	height:100%;
    	margin: 0px;
    	padding: 0px; /* required for Opera to have 0 margin */
    	text-align: center; /* centers board in MSIE */
    }
    And:
    Code:
    <div>
    <img id="background" src="http://www.technologisticsforums.com/style_images/vista/bgs/Aurora.jpg" alt="" title="" /> 
    </div>
    
    <div id="scroller">
    <div id="content">
    
    {Stuff}
    
    </div>
    </div>
    In Firefox, everything is fine, except that the bottom isn't pushed up to show the entire image. In IE7, there are two scrollbars -- the outer scrolls the background and the inner scrolls the content. Maybe IE is supposed to perceive that there isn't anything else to show so it shouldn't be showing the outer scrollbar?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Review the source of the example carefully. You are missing some stuff. Mainly the html, body instead of just body. In the example #scroller is position:absolute not position:fixed.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •