Фоновое изображение заголовка меняет размер при изменении ширины страницы

Question

Изображение моего заголовка меняет размер, когда я меняю ширину моего браузера, до такой степени, что если ширина становится достаточно маленькой, мое изображение будет вытолкнуто. У меня есть background-size: 120%;, и я знаю, что это вызывает его. Будет ли способ установить минимальный размер фонового изображения через процент? Если нет, как я могу это исправить?

При необходимости, пожалуйста, укажите мой сайт по адресу erraticfox.tumblr.com.

О, и вот мой заголовки код CSS:

#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%; 
} 

Вот jsfiddle, вы можете захотеть, чтобы изменить ширину окна результата, и вы увидите мою проблему: http://jsfiddle.net/2AbKb/

Answer 1

Я предложить что-то вроде этого:

#header { 
    margin: auto; 
    display: table; 
    height: 300px; 
    min-width: 800px; 
    background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

Answer 2

Lose background-attachment:fixed; что эффект вы после этого?

Answer 3

Его размеры не изменяются. Я удалил «display-table», поскольку я не думаю, что это было необходимо.

HTML

<div id="hed"> 
</div> 

CSS

#hed{ 


    margin: auto; 


    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%; 
background-color:black; 


}