Размещение большого логотипа на нескольких CSS

Question

У меня есть базовый веб-дизайн с заголовком, средней рамкой (большой квадрат под заголовком) и нижним колонтитулом.

У меня также есть логотип, который занимает как середину, так и заголовок, поэтому мне трудно понять, как правильно нарезать свое изображение. И середина, и заголовок - сплошные цвета, но логотип более обширный. Есть ли способ использовать этот стиль в CSS и разместить логотип поверх нескольких CSS? Это не квадратный логотип, поэтому я не могу просто нарезать его в Photoshop.

Спасибо!

CSS:

* {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 1.1in;
    width: 100%;
    background-color: #0277bc;
    position: relative;
}
#wrapper #logo {
    position: relative;
    top: 200px;
    left: 200px;

}

Answer 1

Сделайте это с позицией: абсолютный.

Предполагая, что у вас есть обертка с идентификатором вокруг всего вашего контента

#wrapper {position: relative;}

Затем присвойте логотипу идентификатор и расположите его относительноверхний левый угол обёртки

#logo {position: absolute; top: 200px; left: 200px;}

в качестве примера.

Возможно, вам понадобится сделать логотип в формате png, если он перекрывает содержимое сайта в любых местах

Answer 2

Как альтернативный ответ для абсолютного позиционирования: отрицательные поля.

если ваш заголовок имеет высоту 100px, а ваш логотип имеет высоту 150px, вы можете центрировать логотип по вертикали, используя:

#logo
{
  margin: -25px 0;
}

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