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

Home Forums CSS Header background image changes size when width of page changes

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

    my header background image changes size when I change the width of my browser, to the point that if the width gets small enough, my image will get pushed out. I have background-size: 120%; and I know that’s what’s causing it. Would there be a way to set the minimal size of the background image via percentage? If not, how could I fix this?

    You can vist my website at if needed a example of the problem.

    Oh and here’s my headers CSS code:

    #header {
        margin: auto;
        display: table;
        height: 300px;
        width: 100%;
        min-height: 300px;
        min-width: 800px;
        background: url('');
        background-position: 0px -650px;
        background-size: 110%;

    Here’s a jsfiddle, you might want to resize the width of the result window and you’ll see my problem:


    That image seems too big for the header at 1600px x 1015px.

    I’m a little confused about how you want it to look as the dimension proportions don’t match.

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