как сделать адаптивную шапку?

[gordy]

долго мучаюсь, поэтому решил все таки спросить....

в html прописываю так

        <div class="logo"></div>

в css прописываю просто

  background: url(../img/bg.jpg);
width: 100%;
height: 400px;

ну картинка обрезается... как исправить?

 

[ultra]

background-size: cover;

Для просмотра ссылки Войди или Зарегистрируйся

 

[gordy]

background-size: cover;

это не фон, а шапка ввиде картинки небольшой на ней нарисованный текст и если использовать свойство background-size: cover; то текст получается сильно увеличиный

 

[ultra]

вы писали выше, что картинка обрезается, если добавить background-size: cover; то картинка должна уменьшиться и занять доступное пространство с сохранением пропорций
с помощью background-position: center; можно отцентровать пикчу
короче, сабж фстудию, я не ванга

в качестве примера
Для просмотра ссылки Войди или Зарегистрируйся

 

[invader]

долго мучаюсь, поэтому решил все таки спросить....

в css прописываю просто

  background: url(../img/bg.jpg);
width: 100%;
height: 400px;

ну картинка обрезается... как исправить?

<img src="../img/bg.jpg" class="logo" />

.logo {
  display: block;
  max-width: 100%;
  height: auto;
}