Header background image changes size when width of page changes

[ErraticFox]

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 erraticfox.tumblr.com 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('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    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: http://jsfiddle.net/2AbKb/

[Paulie_D]

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.

[Author]

Posts