Как заменить # site-title на RESIZABLE image?

Question

Я могу заменить #site-title текст with a fixed-size image, никаких проблем.

Но теперь я бы хотел, чтобы оно изменялось автоматически, исходя из размера браузера, точно так же, как заголовок WordPresse в Twenty Eleven.

FireBug говорит мне, что CSS отвечает за это:

#branding img { 
    height: auto; 
    margin-bottom: -7px; 
    width: 100%; 
} 

Но когда я пытаюсь скопировать это на сайт-заглавием:

#site-title { 
    text-indent: -9999px; 
    width: 100%; /* 980px; width of the image file. */ 
    height: auto; /* 128px; height of the image file. */ 

    margin: 0px 0 0 0; 
    padding: 0em 0 0; 
    background: url(images/header.png) white no-repeat; 
    font-size: 1px; 
    line-height: 1px; 
    text-decoration: none; 
} 

Это на самом деле не работает: На сайте -title изображение остается прежним.

Есть ли что-то еще, что мне нужно для создания функциональности «изменчивой магии», которую имеет новый WordPress?

Answer 1

Чтобы изменить размер изображения, родительский элемент должен быть изменен. Если вы берете тему двадцать одиннадцать, элемент #page не имеет width, хотя он имеет максимальную ширину. Тогда width:100% для изображения изменит его размер в соответствии с шириной браузера.