Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Need a Sticky Footer that doesn't also repeat!

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #188092
    f7brian
    Participant

    Hello Forum! Long time listener, first time poster…
    So I know Chris has a sticky footer video on here but I ran across this method:
    http://mystrd.at/modern-clean-css-sticky-footer/
    It seemed simpler, and it almost works for me.
    Problem is my footer image is repeating across the bottom of the page (at least its sticky) It seems to me like the width: 100%; is responsible for this, however if I change that to the actual pixel width of the footer image it kicks it to the left side of the browser window. (even though I have a margin: auto; set up there). Any help on this would be awesome. I suspect I have something intrinsically wrong w/ my html or css somewhere else that’s effecting things, if anyone wants to check it out I would be grateful. Thanks!
    Here’s the link to the in progress site: http://www.f7digitaldesign.com/working/

    #188099
    Paulie_D
    Member

    So you have a footer that is 100% wide….OK. Is that not what you wanted?

    Your image is 1784px wide and is set to cover the whole width…OK…that works.

    But you says it’s repeating..If it is I can’t tell on my monitor but you could always add background-repeat:no-repeat.

    If you need it to not-repeat (see abaove) but expand to beyond 1784px then you need to play with the background-size options available to you.

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    Either cover or contain is probably what you are after.

    #188172
    f7brian
    Participant

    Thank you, thank you! That solved it–that CSS eluded me. I’ll try to have something a little more challenging next time!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.