SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple background images - scrolling problem

    I have a background image set for the body and another one set for #page, which should just act as a wrapper to hold this second image.
    Here is the CSS:

    html, body {
    margin:0;
    padding:0;
    background-color: #000000;
    background-image: url(../img/bodybg2.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 95%;
    }

    #page {
    position:absolute;
    left:0;
    top:0;
    padding:0;
    margin: 0;
    background: url(../img/grid4.gif) repeat;
    width: 100%;
    height: 100%;
    }

    The issue is that the background image in #page only fills the window viewport. if you expand the size of the window, the background grows with it; however, if the window is small and you scroll within it before resizing, you see that the background image stops at the size of the viewport.

    (I tried adding the following hack, but it did not change anything)
    html>body {min-height: 100%; height: auto;}

    Here is a link to the page, under construction:
    http://www.itp.uzh.ch/~suzanne/bensite/index.html

    Thank you!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you set a percentage height of 100%, which means #page will only show the background at 100% of the viewport height (in this case since the parent is the html/body)

    When you scroll down, that's 100% + hte other space.

    If you don't set a height then it should encompass the entire page
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thanks for the suggestion, but as a matter of fact, if I don't set a height, the grid it doesn't show up at all...
    That's because #page is just a wrapper and has no content of it's own (?)
    I can set a fixed height, of course, for the case of a large monitor/high resolution, but that's a bad solution and also causes the scroll bar to lead down all the way to the bottom (the height defined in px).

    I think this has to do with I the div positioned absolutely (which if I take away also makes the grid disappear). I'm confused by the whole thing but I think there must be a solution?

    Thanks for any comments or suggestions!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, that's because there probably isn't anything in it, as you just said.

    Instead of having the #page be an empty wrapper, could you wrap that element around the page content? That would be a feasible solution (you should lose the AP also if you do that)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohhhh I don't get what you mean?
    The site is a bit complicated (trying to make it exactly how my bf wants...)
    There are several ap divs, including the one that holds the content on each page. i don't know how to 'wrap' the element around it in another way?
    Could you explain or maybe give me an example? That would be really nice
    Thanks-

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Alot of AP eleements eh? Say you have this
    (Note that I'm referring to the element #page as <page> and the content div as <content>)
    Code:
    <page></page>
    <content>All content here</content>
    [/code]
    Now you could renest, aka
    Code:
    <page>
    <content>All content is here</content>
    </page
    You shouldn't have that much AP on a page anyway. I'd lose the absolute positioning and if you need something done and you're thinking absolute position, come back here and ask how we would do it.

    Absolute position should be used sparingly and only for small design segments
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...but i'm doing that already...
    <body>
    <div id="page">
    <div id="box1"></div>
    <div id="title" class="titleHome"></div>
    <div class="navi" id="navi2">
    <a href="index.html" id="navi_home">About</a>
    <a href="research.html" id="navi_research">Research</a>
    <a href="thoughts.html" id="navi_thoughts">Thoughts</a>
    <a href="writing.html" id="navi_writing">Writing</a>
    <a href="images.html" id="navi_images">Images</a>
    <a href="news.html" id="navi_news">News</a>
    <a href="games.html" id="navi_games">Games</a>
    <a href="separata.html" id="navi_separata">Separata</a>
    </div>

    <div id="content" class="generalcontent">
    <p>content here...</p>
    </div>
    </div>
    </body>

    I know what you're saying about absolute positioning... but I'm just trying to make it work with that freaking grid he insists upon it and everything fitting right in to it.
    I have done a lot of research and found that ap was probably the best way to go for this, maybe I'm wrong... but I have a very insistent "client" anyway.

    Thank you for your time in any case.
    Cheers,

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wildeduv View Post
    ...but i'm doing that already...
    Why would I think that ? You say this, implying that it's an empty element
    Quote Originally Posted by wildeduv View Post
    That's because #page is just a wrapper and has no content of it's own (?)
    .
    Could you post a link to the page where this is at? It'd be much easier to give you an exact fix.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the link again!
    (is at the bottom of my first post)
    Sorry... I meant no contwent like paragraphs and stuff that would cause the background to display automatically.
    http://www.itp.uzh.ch/~suzanne/bensite/index.html

    Thank you Ryan!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well this will be just about impossible (not saying iimpossible b ecause as previous CSS quizzes in this forum has shown, not everything is impossible) because it just will be lol. Everything inside #page is absoltuely positioned. That means no other elements even recognzie it's there. Nothing. Every element acts individually. That means #page thinks it's empty. Which means it can't go as high as the content.

    You'd need to rework to floats as I suggested earlier .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK! I got you.
    I'm going to try.
    Thanks for your input... I might come looking for you again
    Cheers,
    suzanne

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .

    Just remember, stay away from absolute positioning for layouts, use it for small design segments. Float it instead . Just remember that.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,
    Have to thank you again. I started a new stylesheet from scratch, taking your suggestion to use floats and only positioning what was absolutely necessary as absolute
    ...and voilą, it works - no more problems with that grid
    http://www.itp.uzh.ch/~suzanne/bensite/index.html

    Cheers,
    suzanne

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Gld ypu got it working (with no bugs either! (good job))
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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