2010-04-20 4 views
0

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

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

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

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

+0

возможно дубликат [Полная ширина Backgrounds на Outlook, '07/'10/'13] (Http: //stackoverflow.com/questions/23280715/full-width-backgrounds-on-outlook-07-10-13) – davidcondrey

ответ

-1

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

+1

Если я использую no-repeat, он вообще не отображается в Outlook. В этом проблема. – kylex

+0

И если вы используете только повтор-y? Это направление, которое вы хотите повторить, исправить? –

-1

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

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

0

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

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

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

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

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

<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> 

Смежные вопросы