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

Со стилями я работаю по принципу «Мы не в циганском таборе, лучше меньше, но красивее». И действительно, не слишком наляпистые дизайны всегда смотрятся аккуратнее, чище и интереснее. Не стоит загружать ваши дизайны массой деталей, которые в действительности способны оценить только вы, потому что вы создатель.
Прежде всего разузнайте у своего монитора, какое у него расширение. Брать размеры вашего заднего фона меньше – больше мороки вам, потому что задний фон всегда должен быть по размеру экрана, модно даже чуть больше. Но только немного.
Я беру разрешение своего документа – 1300px × 1100px. Для меня это оптимальный вариант, фон никуда не съезжает и не расползается. Если вы недоверчиво относитесь к этим параметрам, можете также взять 1 680px × 1 024px, но работать с ним сложнее, ведь ширина у нас увеличилась.
Сегодня с вами я буду создавать стиль, который подойдет практически под любую тематику (не считая мультяшной и по какому-либо сериалу). Вообще, позволю себе лирическое отступление, для свободных каталогов такие стили – просто находка, они удачно подойдут под любую вашу задумку.
Что же, не теряя времени, займемся нашим задним фоном. Я выбрала разрешение 1300px × 1100px для фона, залила его белым цветом. Пока что расскажу немного о задних фонах для стилей, в которых мы хотим сделать слитные шапка + фон. Старайтесь выбирать задние фоны с однородной заливкой. Это может быть всё, что угодно: просто фон, залитый каким-то определенным цветом или бесшовные текстуры. Обращаю ваше внимание на слово «бесшовные», потому что нам нужны будут фоны, которые смогут размножаться по вертикали и при этом не оставлять стыков. Если вы еще не поняли, о чем я вам тут толкую, то при установке фонов поймете сразу же.
Очень важный момент при создании стиля – как на глаз определить его центр, чтобы все дальнейшие картинки располагались симметрично? Никак. Для этого стоит воспользоваться инструментом «Линейка» и поставить вертикальную линию строго по центру фона.

Но наш фон всё еще не законченный, ему требуется шапка. Обычно, я беру высоту шапки примерно 500 – 550px. Для меня это идеальный вариант, чтобы шапка не выглядела слишком маленькой, но и не казалась огромным монстрищем. На ваш выбор вы можете создать шапку отдельно от фона и потом переместить её на него, а можете работать прямо на фоне, посредством масок удаляя ненужные вам элементы.


Мы уже сделали добрую половину нужной работы. Для меня задача еще состоит в том, чтобы сделать внутреннюю начинку форума (так называемые внутренности в народе, для вас будет понятнее, если я скажу – внутренний фон). Если вы не используете структуру с уже прозрачными «внутренностями», этот момент можете пропустить и залить ваши «внутренности» цветом в самом коде. Но мне проще работать с прозрачными элементами, потому для своих дизайнов я сразу же делаю и «внутренности». Всё это: шапка, задний фон и внутренний фон у меня являются одним сплошным задним фоном. В чем-то это упрощает работу со стилями. Вот, что получилось у меня, это мой окончательный вариант фона со всеми деталями:

Теперь разберемся с нужными кодами. Я предлагаю вам два варианта наборов кодов: один из них я использую лично, второй понадобится вам при условии, что вы не работаете с прозрачной структурой.
Набор первый:

body {
    background: url(http://xmages.net/storage/10/1/0/3/c/upload/5840b959.jpg);
background-position: top center;
    }

    body {
    background-color: transparent !important;
    background-image: url(http://xmages.net/storage/10/1/0/3/c/upload/5840b959.jpg);  
    background-repeat: no-repeat;
    }

    html {
    background: #dbdbdb url(http://xmages.net/storage/10/1/0/3/c/upload/05f8f05d.jpg) repeat-y; 
    background-position: center top;
    }

body {
    background: url(http://xmages.net/storage/10/1/0/3/c/up … 40b959.jpg); - сюда вставляем фон, слитый с шапкой (без каких-либо изменений)
background-position: top center;
    }

    body {
    background-color: transparent !important;
    background-image: url(http://xmages.net/storage/10/1/0/3/c/up … 40b959.jpg); - в этот код также вставляем ссылку на фон, слитый с шапкой
    background-repeat: no-repeat;
    }

    html {
    background: #dbdbdb url(http://xmages.net/storage/10/1/0/3/c/up … f8f05d.jpg) repeat-y;
    background-position: center top;
    }
Третий код особенный, и именно из-за него так не рекомендуется вставлять различные картинки в задний фон по краям. Дело в том, что в этом коде установлен параметр, который размножает фон по вертикали. Это делается для того, чтобы когда форум рос в длину за счет категорий и форумов, внизу не оставалось пустое место и фон размножался автоматически.
Для сравнения примеры однотонного фона и фона с узором:

Второй набор:

#pun-title TABLE { 
background : transparent url(http://xmages.net/storage/10/1/0/9/e/upload/ab3d60ff.jpg) no-repeat left top; 
 margin-left : 0px;

}

body {background-color: #000000;
background-image : url("http://xmages.net/storage/10/1/0/1/6/upload/e557e6da.jpg");
background-repeat: no-repeat;
background-position : top center;

}

#pun {
background-image : url("");
background-color: #1a2537;
background-position : center;
background-attachment : fixed;

}

#pun-title TABLE {
background : transparent url(http://xmages.net/storage/10/1/0/9/e/up … 3d60ff.jpg) no-repeat left top; - адрес шапки
margin-left : 0px;

}

body {background-color: #000000;
background-image : url("http://xmages.net/storage/10/1/0/1/6/upload/e557e6da.jpg"); - адрес заднего фона С ШАПКОЙ
background-repeat: no-repeat;
background-position : top center;

}

#pun {
background-image : url("");
background-color: #1a2537; - этот код как раз для заливки "внутренностей" форума, т.е. - внутреннего фона
background-position : center;
background-attachment : fixed;

}

Вот и все премудрости создания дизайна, включающего в себя слитые шапку + фон. Удачного создания интересных дизайнов