Превью фоном контейнера (Решено)

Вопросы
Есть контейнер

<div class="header_bg">   </div>

Какой код нужно вставить в контейнер, чтобы превью топика выводилось фоном этого контейнера?

6 комментариев

avatar 
<div class="header_bg" style='background-image:{$oTopic->getPreviewImage()};'>   </div>
avatar
То, что вы написали не работает.
Работает вот такой вариант:
<img class="header_bg" src="{$oTopic->getPreviewImageWebPath('1360crop')}" style="width:100%">

Но

Таким образом фон растягивается по всей ширине и относительно по высоте (т.е. при разрешении 1300 px высота фоновой превьюхи примерно 760 px). А нужно высоту ограничить контейнером (400 px), но чтобы фоновое изображение не растягивалось, а заполняло контейнер.

PS
Должно получиться примерно как тут
avatar
firebug подсказывает, что так можно сделать следующим образом:

<div style="background-image: url({$oTopic->getPreviewImageWebPath('1360crop')})" class="banner topic-banner">


+ стили:
*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
#header .banner {
    background-color: #111;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    position: relative;
}
avatar
А не подскажите как сделать условие.
Чтобы была проверка: если превьюха еть — выводить 
<div style="background-image: url({$oTopic->getPreviewImageWebPath('1360crop')})" class="banner topic-banner">
, если нет — ничего не выводить?
avatar 
<div {if $oTopic->getPreviewImageWebPath('1360crop')}style="background-image: url({$oTopic->getPreviewImageWebPath('1360crop')})"{/if} class="banner topic-banner">
avatar 
{if $oTopic}
    <div style="background-image: url({$oTopic->getPreviewImageWebPath('1360crop')})" class="banner topic-banner">
{/if}
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.