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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS/HTML height multiples

    Hello, I am creating a site using CSS and HTML (I do have access to php if need be), the main image for my background fits seamlessly into a header and footer, but is quite unique. Now the header and the footer are just vertical flips of eachother so the layout would look something like this:

    111
    aaa
    bbb
    ccc
    ccc
    bbb
    aaa
    111

    where the 111's are the header/footer and the rest is the background image. Is there any way in CSS or HTML that I can tell the page to display a multiple of the background image height so I do not end up with something like:

    111
    aaa
    bbb
    ccc
    ccc
    bbb
    111

    for example say the content was larger than one height of the background image, the site would display:
    111
    aaa
    bbb
    ccc
    ccc
    bbb
    aaa
    aaa
    bbb
    ccc
    ccc
    bbb
    aaa
    111


    thank you very much.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    If you set height to auto it will stretch the height of the content that fills it, is that what you want? As long as you had background repeat set to repeat-y it would repeat it for as long as the div stretched.

    However, you may need to set a minimum height for the content div so that if there is not enough content to fill your background image it will remain at least a certain size.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if i understand this correctly wouldn't the following work?

    #content{
    min-height:200%;
    /height:200%; (for the benefit of IE)
    }

    I've never had to do this before because i normally have my content div automatically extend/wrap around the contents


  •  

    Posting Permissions

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