Внешний вид фона тела не повторяется - PullRequest
Новая
       5

Внешний вид фона тела не повторяется

0 голосов
/ 20 апреля 2010

Я отправляю электронное письмо в формате HTML, ориентированном на Outlook 2007/2010. Я применил фоновое изображение к тегу тела, но оно не работает. Код как ниже: 

<body 
style="background-image: url('http://example.com/bg.jpg'); 
background-repeat: no-repeat;
background-position:top center;">

Однако, если я изменю «no-repeat» на «repeat-y no-repeat», оно показывает фоновое изображение, но повторяется.

Может ли кто-нибудь помочь мне с этим?

Ответы [ 3 ]

0 голосов
/ 09 августа 2010

Вы можете взломать его с очень широким изображением, расположенным в горизонтальном центре. Повторяется в обоих направлениях (по умолчанию).

Это должно позволить вам получить визуальный эффект после

0 голосов
/ 07 июня 2012

Я предполагаю, что вы не хотите, чтобы фоновое изображение повторялось?

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

В этом случае, предполагая, что невозможно иметь неповторяющееся изображение bg (я не уверен, если честно), я бы повторил-y изображение и имел бы контейнер под заголовком, такой же ширины, как Ваше фоновое изображение с соответствующим цветом bg, чтобы оно скрывало повторяющееся изображение bg.

Также стоит добавить изображение bg в первый контейнер таблицы, так что если кто-то прочитает сообщение в клиенте веб-почты, он все равно увидит фоновое изображение (многие клиенты веб-почты удаляют теги head и body).

Я не проверял это, но вот примерно то, что я думаю: 

<body style="
padding:0;
margin:0;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">

<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:100%;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">
<tr>
    <td align="center" valign="top">
        <table style="
            border-collapse:collapse;
            padding:0;
            margin:0;
            width:720px;
            height:200px;">
            <tr>
                <td><h1>Header Content Goes Here</h1></td>
            </tr>
        </table>
        <table style="
            border-collapse:collapse;
            padding:0;
            margin:0;
            width:720px;
            background-color:#fff;">
            <tr>
                <td><p>Body Content Goes Here</p></td>
            </tr>
        </table>
    </td>
</tr>

0 голосов
/ 20 апреля 2010

Выберите один стиль. repeat-y подразумевает, что оно не повторяется в направлении x.

...