Уроки дизайна и вёрстки

Хотя в спецификациях CSS2 это детально оговорено, но и сейчас есть способ использовать два изображения в качестве фона. Итак, что делать, если мы хотим иметь два изображения в качестве фона — например, одно повторяющееся и одно отдельно стоящее?

На самом деле, решение простое . Зададим фоновый рисунок для двух вложенных элементов: body и html

<span class="keyword">html</span> <span class="rules">{

 <span class="keyword">background-image</span>: <span class="value">url(background-repeatx.jpg)</span>;

 <span class="keyword">background-repeat</span>: <span class="value">repeat-x</span>;

 <span class="keyword">background-color</span>: <span class="value">#d2d7e4</span>;}</span>

<span class="keyword">body</span> <span class="rules">{

 <span class="keyword">font</span>: <span class="value">0.9em Verdana, Geneva, Arial, Helvetica, sans-serif</span>;

 <span class="keyword">color</span>: <span class="value">#000000</span>;

 <span class="keyword">background-image</span>: <span class="value">url(recipes.gif)</span>;

 <span class="keyword">background-repeat</span>: <span class="value">no-repeat</span>;

 <span class="keyword">background-position</span>: <span class="value">98% 2%</span>;

 <span class="keyword">margin</span>: <span class="value">0</span>;

 <span class="keyword">padding</span>: <span class="value">46px 0 0 0</span>;
}</span>