SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    right-aligned background issue

    Hola everyone!

    Here's the new issue...I have a tiling background assigned to the right side of the BODY element. It's very tall (1228px) and set to repeat-y as follows:

    Code CSS:
    body {
    	background: url('../images/border.jpg') right top repeat-y;
    }

    I want the graphic to stay on the the right window edge, unless the window drops below 1050px. Then I want it to stick at 1050px on the right edge and stay there, forcing scroll bars, and keeping the image stuck at that width.

    Well...here's what I've tried that doesn't work:

    Code CSS:
    body {
    	min-width: 1050px;
    	background: url('../images/border.jpg') right top repeat-y;
    }

    min-width forces the scrollbars, but the graphic remains fixed to the right now matter how small. Can I get the graphic stick at 1050px or greater?

    For an example of this on a live site (not working mind you...it sticks to the right regardless of size), take a look here.

    I have tried a wrapper with a fixed width, and then attaching the background. This worked, but clipped the graphic to the height of the wrapper, which fails whenever the page is really short (it'll only go down as far as the wrapper which is unacceptable...). I'd be open to a 100% height solution with a wrapper if it exists.
    body {
    display: public-affection;
    }

  2. #2
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No body? Wow. Maybe it's just not possible. Any suggestions?
    body {
    display: public-affection;
    }

  3. #3
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok...I surrender. Given few options, I'm planning on going back to using a wrapper like this:
    Code CSS:
    #wrapper {
        min-height: 1000px;  // hoping this is far enough down that most users wont notice/need it
        min-width: 1050px;
        background: url('../images/border.jpg') fixed right top repeat-y;
    }

    Unless someone has a better idea. Thanks anyways.
    body {
    display: public-affection;
    }

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by candlebain View Post
    Hola everyone!

    Here's the new issue...I have a tiling background assigned to the right side of the BODY element. It's very tall (1228px) and set to repeat-y as follows:

    Code CSS:
    body {
    	background: url('../images/border.jpg') right top repeat-y;
    }

    I want the graphic to stay on the the right window edge, unless the window drops below 1050px. Then I want it to stick at 1050px on the right edge and stay there, forcing scroll bars, and keeping the image stuck at that width.

    Well...here's what I've tried that doesn't work:

    Code CSS:
    body {
    	min-width: 1050px;
    	background: url('../images/border.jpg') right top repeat-y;
    }

    min-width forces the scrollbars, but the graphic remains fixed to the right now matter how small. Can I get the graphic stick at 1050px or greater?

    For an example of this on a live site (not working mind you...it sticks to the right regardless of size), take a look here.

    I have tried a wrapper with a fixed width, and then attaching the background. This worked, but clipped the graphic to the height of the wrapper, which fails whenever the page is really short (it'll only go down as far as the wrapper which is unacceptable...). I'd be open to a 100% height solution with a wrapper if it exists.
    Hi, i'm not sure if i understand what you're trying to do: you want the image stay put on the right side when resizing the view port to a smaller resolution and still have it tiled down regardless the content?

    Try wrapping everything in an inner wrapper with the background image set on that instead of the body. That gives me in FF the result that the image is staying at the right side, regardless viewport size and regardless content it is tiled to the bottom....
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion...and yes, that mostly works.

    Where I'm getting stuck, is that the image will only go down as far as the wrapper. On a short page, the image gets clipped where the wrapper ends.

    This site's look requires the image to go all the way down, even on a page with little content.

    So can the wrapper be forced to extend to the bottom of a page automatically?
    body {
    display: public-affection;
    }

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,597
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well you could set a min-height on the wrapper that is the full height of hte image.

    Say the image is 1100px tall. Set a min-height:1100px.

    Though that will force scrollbars for small resolutions. If you dearly requre the image to be shown then go for it
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, you want the image stretched down passed the content? Because when i tested it i removed almost all of your p's and it still went to the bottom...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So no way to get it working on the BODY tag? I couldn't find a way either. I can get the BODY to stay at a fixed size, but I can't get the image to stay against the generated edge...instead, it clings to the right side of the viewport.

    Looks like my best option is applying it to a #wrapper div with min-width: 1050px; and then forcing the div to be large enough for typical resolutions to fake full screen. That was what I settled on too.

    Any way to get the #wrapper to be set to 100% height of the viewport? I know height: 100% doesn't work like that....or it didn't when I tried it.
    body {
    display: public-affection;
    }

  9. #9
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Ah, you want the image stretched down passed the content? Because when i tested it i removed almost all of your p's and it still went to the bottom...
    Well, right now, the background is attached to the BODY tag and should run all the way down. If I reverse it, and put the image on the #wrap DIV, then it will only go down a bit...here's a page that shows it looking "less good" when the back is attached to #wrap.
    example
    body {
    display: public-affection;
    }

  10. #10
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok...and I set that link above with the Background on the #wrap tag.

    Here, the horizontal scrolling works like I want, but the background clips to the size of the #wrap. Can the wrap be forced to auto-fit the height of the window?
    body {
    display: public-affection;
    }

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,597
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could set a min-height:100% on the wrap element.

    Then set html,body{height:100%;}

    That will make the #wrap element at the minimum 100% height
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried my suggestion? Because that doesn't give any clipping, tiles all the way down the viewport and it keeps the image to the right no matter the screen size
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it! Ryan, you're my hero yet again!

    Now how's this going to fare in IE6/IE7? I haven't started that debugging for IE phase yet, so advanced warning would be appreciated.

    Thanks for the help guys!
    body {
    display: public-affection;
    }

  14. #14
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And Luki_be...maybe I didn't understand your suggestion before, but when I tried that, the "inner wrapper" was shrink-wrapping the content...collapsing on the content. I may not have understood an element of your suggestion though.

    The link has Ryan's suggested fix in place now.
    body {
    display: public-affection;
    }

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,597
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    IE6 will have a problem with it. It doesn't support min-height. However giving it the height property will do the same thing
    Just do something like this
    Code:
    * html #wrap{height:100%;}
    When/if you want help for IE6/7 problems just shout/create a thread and I'll be there.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  16. #16
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by candlebain View Post
    And Luki_be...maybe I didn't understand your suggestion before, but when I tried that, the "inner wrapper" was shrink-wrapping the content...collapsing on the content. I may not have understood an element of your suggestion though.

    The link has Ryan's suggested fix in place now.
    That produces the same result i had locally in FF, except Ryans' solution doesn't need an extra element. Did you add something to the innerwrapper?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,597
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Luki perhaps posting hte full code you worked with would help

    My solution seems the most optimal though.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  18. #18
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did this per Ryan's suggestion:

    html, body {
    height: 100%;
    }
    #wrap {
    min-height: 100%;
    min-width: 1050px;
    background: url('../images/border.jpg') right top repeat-y;
    }
    * html #wrap {
    height: 100%; /* to fix IE6 lack of support for min-height */
    }
    body {
    display: public-affection;
    }

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

    Finish up your design in FF/good browsers then tackle IE. If you have problems with that just shout .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  20. #20
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll definitely be back when I get stuck on IE. Thanks again guys!
    body {
    display: public-affection;
    }

  21. #21
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Luki perhaps posting hte full code you worked with would help

    My solution seems the most optimal though.
    Sorry for the late reply guys, was pumping some iron....

    The full code was real simple: i wrapped everything in the wrapper inside another div #inner. Set the background image on that #inner and removed it from the body.... seemed to do the trick, without any shrink wrapping....

    Like i said: no clipping, image stayed put at the right, tilling until the end of the viewport....

    I tested it with 5 p's, 1 p element, a p element with 5 words....

    But guys, don't worry about it.... if it works without an extra element.... that's much better (i should have known that the 100% and min-height would have suffice..... but then again, i'm no wizard yet lol)

    And IE6 shouldn't give problems since min-height = height for that beast, so the star html hack should take care of it .... but i still have some 9000 posts to go to be 100% sure
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,597
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    But guys, don't worry about it.... if it works without an extra element.... that's much better (i should have known that the 100% and min-height would have suffice..... but then again, i'm no wizard yet lol)
    Give it time

    It's just a matter of remembering what others say in certain situations, understanding why that's the answer, and then repeating it next time someone asks .
    And IE6 shouldn't give problems since min-height = height for that beast, so the star html hack should take care of it .... but i still have some 9000 posts to go to be 100% sure
    Nah you're right on that . The higher your post count, the more you know!..

    Just kidding obviously.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  23. #23
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Give it time

    It's just a matter of remembering what others say in certain situations, understanding why that's the answer, and then repeating it next time someone asks .


    Nah you're right on that . The higher your post count, the more you know!..

    Just kidding obviously.
    lol ... well, i'm getting to my first 1000
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •