HTML\CSSКак зафиксировать фон при прокрутке

С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокрутке. Значение свойства:

scroll — фон прокручивается вместе с содержимым (по умолчанию).
fixed — фон не прокручивается, зафиксирован на одном месте.

body {    
    background-image: url('texture.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}
Читать далее...

HTML\CSSКак с помощью background сделать несколько фонов

В CSS3 несколько фонов одному элементу можно задать с помощью множественных фонов:

background:
    url('img1.png') no-repeat 0 0,
    url('img2.png') repeat-x 50% 50%,
    url('img3.png');

или

background-image: url('img1.png'), url('img3.png');
background-repeat: repeat-y, repeat-y;
background-position: left, right;

Картинка img3.png будет в нижнем слое, а img1.png в верхнем. В множественных фоновых изображениях нельзя задавать фоновый цвет, поэтому он зачастую выносится в отдельный блок.

Читать далее...

HTML\CSSinline-block и пробелы

Блочно-строчные элементы ведут себя как текст, поэтому если в коде есть пробел между элементами, то он отображается и на странице. Этот пробел часто увеличивает отступы между элементами и они не помещаются в родительский блок в одну строку, хотя по размерам должны бы.

Решить проблему можно несколькими способами. Пример:

1. Убрать пробелы:

<ul>
  <li>
   Один</li><li>
   Два</li><li>
   Три</li>
</ul>
Читать далее...