Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthormozero
    • CommentTimeJun 27th 2008
     permalink
    I want to use an image in the background image which shud cover the whole browser window and will remain static and the content over it will scroll. But the issue is that what size of background image i shud use so that the image appears with its 100% height and width on browsers with different resolution.

    Thanks
    •  
      CommentAuthornetbiest
    • CommentTimeJun 27th 2008 edited
     permalink

    #background {
    z-index : -1;
    width : 100%;
    position : absolute;
    height : 100%;
    }
    #scroller {
    z-index : 2;
    left : 0;
    overflow : auto;
    width : 100%;
    position : absolute;
    top : 0;
    height : 100%;
    }
    #content {
    padding-right : 20%;
    padding-left : 20%;
    padding-bottom : 1%;
    padding-top : 1%;
    }

    I put something like that into the HEAD and the following into the BODY
    <div>
    <img id="background" title="some-hintergrund" alt="some-hintergrund" src="http://some.jpg" name="background">
    </div>
    <div id="scroller">
    <div id="content">
    <p>good luck<p>
    </div>
    <div>
    you may have a look on my page http://jugendhilfe.biester.ev.googlepages.com/biester-muehle.html
    There it runs well. You can resize it and everything stays on its position without cutting the backround.
    Hope that fits to your page too.
    • CommentAuthorgogogob
    • CommentTimeJun 29th 2008
     permalink
    Unfortunately, CSS doesn't provide for the dimensioning of background images; they are rendered at their native size.
    An absolutely positioned image could be scaled/sized as <style>#image{width:100%;height:100%}</style>.
    The obvious problem is that an image specified in the document flow will scroll with the page.
    Modern browsers support position:fixed, but older IEs don't work with it.
    One approach is to turn off scrolling for the body... <style>html,body{overflow:hidden;width:100%;height:100%}</style>
    Put in your image.
    Then, create a page wrapper, <style>#wrapper{overflow:auto;height:100%}</style>
    I can't do justice to this subject.
    Take a look at... http://www.w3a2z.net/ to see me effort towards this object.
    In that case, I resorted to JavaScript to make the wrapper fill the height of the viewport because I couldn't get {height:100%} to work but... I didn't try <style>#html,body{height:100%}</style>, a suggestion that I recently came across.
    You can contact me via that site... happy :) to help...
Add your comments
    Username Password
  • Format comments as (Help)