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

Home Forums CSS Banner height & width problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #235214

    Hi there,

    I’m setting up a fading head banner on and having some trouble getting it to re-size smoothly as the browser size is changed. If you check out the static banner on and re-size the browser, you’ll see that the content below moves up/down smoothly based on the image size.

    I’m basically trying to get the same with this fading banner image. With the main banner wrapper I’m forced to set the height by px, when I set as auto or 100% it disappears altogether:

    height: 311px;

    But by setting this fixed height, I’m left with empty space when the browser is at certain sizes (because the image is set to width: 100% of the page)

    I’m stumped!


    Try setting padding-bottom as % instead. That way, height is created by the padding, which is relative to width, so it will resize fluidly.

    There’s a round-up here that you might find useful

    And a blog post with explanations

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.