Как сделать фон сайта 24.03.2013

Всем здравствуйте! Многие задаются вопросом, как придать своему сайту индивидуальности. Что бы сделать такого, чтоб придать своему ресурсу индивидуальности.

Но если человек не силен в знаниях по css, то надо придумать что нибудь такое, что можно легко сделать. и получится красиво и реализовать не сложно. Да, можно просто изменить фон сайта и он сразу же заиграет по новому.

Но вот как сделать фон сайта??? Об этом сейчас и поговорим. Как я уже сказал выше сделать это действительно просто. Достаточно изменить одну строчку в файле style.css у себя на сайте. О принципах работы с файлом style.css я рассказывал вот в этой статье >>

Ну так вот, за фон на нашем сайте отвечает свойство background и прописывается оно для тега body, потому как он охватывает все видимое на экране тело сайта. Вот как выглядит эта строчка у меня:

Давайте расскажу что эта строчка значит у меня.

url (images/bg-head.png) — это значит что у меня на фоне стоит картинка, та самая в шапке, на которой нарисован торчащий из сайта провод и гжель.

center top no-repeat — это правила которые обозначают что эта картинка должна стоять по центру (center) вверху (top) и не повторяться (no-repeat). Остальной фон у меня просто белый, для верности еще можно было бы добавить еще одру команду в эту строчку — #fff что означало бы белый фон.

Конечно это не единственно верный вариант который можно сделать. Давайте разберем еще несколько примеров как можно сделать фон. Но перед этим давайте поговорим о том как вставить картинку на фон. Картинка эта лежит у нас в папке images, которая находится в теме нашего блога. У меня блог сделан на wordpress и вот так выглядит путь до этой папки:

public_html/wp-content/themes/sayt_stroy/images — где sayt_stroy это название папки с моей темой, у вас может она называться по-своему. Если в вас сайт сделан на другом движке или без движка вообще, сути это не меняет. Картину можно залить скажем в контакт как документ и вставить путь до этой картинки вместо images/bg-head.png.

Как же залить картинку к себе не сайт в папку images, подробно посмотрите вот тут в статье про FTP.

А мы идем далее и поговорим о том как сделать фон сайта текстурой. Текстура это одна небольшая картинка которая будет повторяться и в итоге получится цельная картинка. Ну как обои в вашей комнате ))) Вообщем смысл я думая понятен.

Давайте расскажу как поставить текстуру. Ну во-первых ее надо найти. Но, найти подходящую текстуру действительно сложно. Вот вам в помощь обалденный заграниШный сервис который я откопал на просторах инета, когда стояла задача подбора текстур - www.patterncooler.com  Он действительно очень классный. Мало того что можно найти подходящий рисунок, но еще можно изменить цветовую гамму этой текстуры.

Итак, после того как с текстурой определились, заливаем ее в папку images и прописываем следующую команду в теги body:

body {

background: url  (images/tecstura.png);

}

Где tecstura.png — это название вашей текстуры. И у нас получается что текстура начинает повторяться по всему экрану как по оси х так и по оси у.

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

body {

background: url  (images/tecstura.png) repeat-x #85D6F0;

}

Верхнюю часть по оси х будет занимать  повторяющаяся текстура и высотой  она будет равна высоте картинки текстуры. А всю остальную часть будет занимать фон небесного цвета. #85D6F0 — это и есть как раз тот самый фон. Цвет этого фона представлен в 16-ричной системе исчисления и перед ним поставлена решетка. (так обозначаются цвета в html) В данном случаи это небесный цвет.

Ну вот вроде описал распространенные варианты, поэкспериментируйте, подберите наиболее подходящий для вас. Думаю задача как сделать фон сайта у вас решиться. Спасибо за внимание, подписывайтесь на обновления, будем на связи!

P.S. Последние несколько дней мою голову занимает вот эта песня, послушайте, может и вас она заразит :)

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте