Как заменить # site-title на изображение RESIZABLE?

Question

Я могу заменить #site-title текст изображением фиксированного размера , без проблем.

Но теперь я бы хотел, чтобы он автоматически изменял размер в зависимости от размера браузераточно так же, как заголовок 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;
}

Это на самом деле не работает: изображение заголовка сайта остается прежним оригинальным размером.

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

Answer 1

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