Как вывести картинку в shortstory.tpl через background-image

вопрос

Как вывести таким образом?:

HTML

<tr> 
            <td> 
                <a href="http://piples.ru/soft/security/43472-antivirusnye-bazy-dlya-eset-nod32-ot-10122011.html"> 
                <div title="Полная новость" class="poster"> 
                    <table> 
                        <tr> 
                            <td height="1px"> 
                                <div class="popuptitle">Антивирусные базы для ESET Nod32 от (10.12.2011)</div> 
                                <div class="popuptitlearr"></div> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td height="auto" class="catalogimage" style="background-image: url(http://piples.ru/uploads/posts/2011-12/1323622329_1309882142_nod32_base.jpg);"> 
                                &nbsp;
                            </td> 
                        </tr> 
                    </table> 
                </div> 
                </a> 
            </td> 
        </tr>

CSS

#catalog_post {
    width: 100%;
    margin: 10px 0;
}

#catalog_post td {
    vertical-align: top;
}

.clist_td {
    width: 33.3%;
}

.shortstory_cat {
    -moz-border-radius: 10px;
    -webkit-border-radius:10px; 
    border-radius: 10px;
    background: #FFF;
    margin: 5px;
    -moz-box-shadow: 0 1px 3px #A2A2A2;
    -webkit-box-shadow: 0 1px 3px #A2A2A2;
    box-shadow: 0 1px 3px #A2A2A2;
}

.shortstory_cat > table {
    width: 100%;
}

.shortstory_cat .title a, .shortstory_cat.title a:hover, .shortstory_cat .title a:visited {
    font: bold 10px Tahoma;
    color: #FFF;
    text-decoration: none;
}

.catalogimage {
    height: auto;
    background-size: 200px auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-color:  transparent;
}

.poster > table {
    width: 100%;
    height: 340px !important;
    margin: 0;
}

.shortstory_cat .poster {
    text-align: center;
    height: 340px;
    overflow: hidden;
    background: #FFF;
}

.shortstory_cat .catmenu {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; 
    border-radius: 3px;
    padding: 3px;
    background: #EAEAEA;
    margin: 5px 10px;
}

.catmenu td {
    padding-right: 7px;
    font: normal 11px Tahoma;
    color: #000;
    text-shadow: 0 1px 0 #FFF;
    vertical-align: middle !important;
}

.catmenu td a, .catmenu td a:hover, .catmenu td a:visited {
    color: #000;
    text-decoration: underline;
}

.catmenu td a:hover {
    text-decoration: none;
}

.popuptitle {
    margin: 0 10px;
    padding: 5px;
    background: #1F1F1F;
    color: #FFF;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; 
    border-radius: 3px;
    -moz-box-shadow: 0 1px 3px #A2A2A2;
    -webkit-box-shadow: 0 1px 3px #A2A2A2;
    box-shadow: 0 1px 3px #A2A2A2;
}

.popuptitlearr {
    height: 0;
    width: 0;
    border-top: 7px solid #1F1F1F;
    border-left: 7px dotted transparent;
    border-right: 7px dotted transparent;
    border-left: 7px solid transparent\9;
    border-right: 7px solid transparent\9;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 999;
}

.shortstory_cat .poster:hover .popuptitle {
    -moz-box-shadow: 0 1px 6px #F27E52;
    -webkit-box-shadow: 0 1px 6px #F27E52;
    box-shadow: 0 1px 6px #F27E52;
}

.shortstory_cat a {
    color: #FFF;
    text-decoration: none;
}

Я не понимаю, что нужно вставить в строке

<td height="auto" class="catalogimage" style="background-image: url(рисунок.jpg);">&nbsp;</td>

вместо (рисунок.jpg).

Ответил: ПафНутиЙ

Когдаж вы научитесь то верстать!

Таблицы - для вывода табличных данных. На дивах это делается в виде 2х блоков и ссылки...
А вообще, для вывода картинки в фон блока нужно использовать дополнительное поле, в котором будет лежать адрес картинки.
Таким образом будет как то так:

 [xfgiven=image]style="background-image: url([xfvalue_image]);"[/xfgiven_image]

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

Юзер

pleak - 2015-02-0213 декабря 2011 21:41 - #2809

Через доп поле слишком примитивно, этот вариант не подходит. Можно как-то без доп. поля, скриптов и прочих сторонних вмешательств, но пока не понимаю как. Пример выше взят из реального шаблона, единственное, доступа к файлу shortstory.tpl не имею.
P.S. Верстать умею.

Админ

3457

ПафНутиЙ - 2015-02-0214 декабря 2011 06:16 - #2810

Да, можно без скриптов, допполей, и т.д.
Просто в шаблоне оставить кусок пустого кода, а в новость вставлять этот кусок кода ))))
Ещё можно для каждой новости создавать отдельный шаблон и туда вписывать нужный код.

Цитата: pleak

Через доп поле слишком примитивно

Цитата: pleak

P.S. Верстать умею.

Когда научитесь - поймёте ошибочность своего мнения. Доп поля - это самое первое и простое средство кастомизации своего ГС (или не очень).

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

pleak - 2015-02-0214 декабря 2011 18:19 - #2818

Цитата: ПафНутиЙ

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

Ха ха, очень смешно

Цитата: ПафНутиЙ

Доп поля - это самое первое и простое средство кастомизации своего ГС (или не очень).

Жаль что у меня не ГС, так бы воспользовался.
Вообщем вот как я добился практически желаемого результата:

1. Создаем блок и пихаем в него тег short-story:

<div class="block">{short-story}</div>

Далее дело за CSS:
2. Задаем высоту в нуль пикселей, а так же прописываем правило overflow:

.block { height: 0; overflow: hidden; }

Прописываем правила для изображений находящихся в блоке класса block:
3. Задаем свойства позиционирования и размеры изображения:

.block img { position: absolute; clip: rect(0px,500px,500px,0px); height: expression(document.body.clientHeight > 500? "500px": "auto" ); width: expression(document.body.clientWidth > 500? "500px": "auto" ); }

Для вывода информации после изображения прописываем следующему блоку отступ от верхнего края в 500px (можно +10px еще).
Вот и все.

Админ

3457

ПафНутиЙ - 2015-02-0214 декабря 2011 18:58 - #2821

Жесть))))) Записать js в CSS - это называется без использования скриптов?
Или костыли теперь считаются показателем качественной вёрстки?
А если будет две картинки?
А как после этого работает быстрое редактирование?

Лучше уж jquery использовать (вёравно библиотека DLE есть), хотя бы решение элегантно будет выглядить.

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

pleak - 2015-02-0214 декабря 2011 22:49 - #2824

Удали js и пропиши обычные свойства, смысл не изменится.
У меня не используется две картинки, так что для меня в самый раз.
Быстрое редактирование работает отлично.

Так приведи пример с jquery.

Админ

3457

ПафНутиЙ - 2015-02-0214 декабря 2011 23:25 - #2825

В шапке, при наведении на пункт меню "Главная".
3 новости.

Каков вопрос - таков и ответ. Просто помните об этом.

Загрузка. Пожалуйста, подождите...

Как вывести картинку в shortstory.tpl через background-image

Ответил: ПафНутиЙ

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

Похожие вопросы

не понятное отображение в IE

Не работает высота блока в профиле

Подчеркивание ссылок в верхнем меню

Помогите с выводом новости в отдельном шаблоне

помогите пожалуйста как исправить это

помогите исправить блок

Настройка модального окна

Помогите исправить верстку слайдера

Как правильно создать css table?