Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 5 of 5

Thread: 100% repeating background on div?

  1. #1

    100% repeating background on div?

    I currently have a repeating background on the body and have a fixed container size, however at the end of each page I would like to have a footer with a repeating background in a div that fills the entire length of the window. ie not just the width of the container size.

    How can I achieve this, any help is appreciated?

  2. #2
    Without seeing any of the code you're working with it's hard to just give you the answer.

    But in theory... place a div outside of your container that has the fixed width. Set the background with CSS and repeat it horizontally.


    If you place your code here or a link to it, it'll be easier to give you a better response.
    Γνώθι Σεαυτόν

  3. #3
    Here is a stripped down version, http://dev4.allneo.com/test/test.html

    I am trying to get the black stripe div footer to repeat 100% of the browser window, notice I have fixed width container. The footer should be at the bottom and outside of the container. Thanks for the help.

  4. #4
    Honestly, I'd recode the CSS if I were you. You're using position: absolute and relative all over the place when it's not really necessary to do that.

    You should be able to leave the body background as you have it.
    Start your containing div that sets the width and place all your information in there using floats to layout the site.
    Close that containing div and then place a footer outisde of the containing div and use your footer background.

    It seems like a lot of your position: relative calls aren't necessary or at being used to move elements into a position that could just as easily be done by using a margin, some padding or both.

    postion: relative changes the normal flow for the elemet it's applied to, but the elemets after it are uneffected. Which means if you start using position: relative on one element to put it in a certain place, you may need to use it on other elements to do the same. In doing that everything's pushed all around, things are being covered up and you end up with a mess on your hands.
    Γνώθι Σεαυτόν

  5. #5
    Thanks for the reply Ankou. Im aware of the positioning properties but thought they were relevant to my layout and positioning. I will look into your suggestions.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012