Статичный Фон Сайта
#1
Отправлено 29 Октябрь 2013 - 20:48
#2
Отправлено 30 Октябрь 2013 - 02:02
body { background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat fixed; }
после останется загрузить изображение site_bg.gif или изменить существующее изображение.
#3
Отправлено 30 Октябрь 2013 - 10:39
Сake (30 Октябрь 2013 - 02:02) писал:
body { background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat fixed; }
после останется загрузить изображение site_bg.gif или изменить существующее изображение.
Спасибо, скажите.Сама картинка фона должна быть по максимальному размеру страницы..?и , я так понимаю, чем тяжелее файл(к примеру картинка с высоким разрешением), тем дольше будет грузиться сайт. Есть способы оптимизировать фон, с минимальной потерей качества?
#4
Отправлено 30 Октябрь 2013 - 12:55
Prorock_Ugl (30 Октябрь 2013 - 10:39) писал:
#6
Отправлено 30 Октябрь 2013 - 17:27
Prorock_Ugl (30 Октябрь 2013 - 13:20) писал:
Это можно добавить таким кодом.
body { background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat; }
#7
Отправлено 30 Октябрь 2013 - 20:41
Koderhan (30 Октябрь 2013 - 17:27) писал:
Это можно добавить таким кодом.
body { background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat; }
Т.е. грубо говоря, подобрать текстуру, чтобы она состыковывалась без видимых швов?
#9
Отправлено 14 Ноябрь 2013 - 21:53
Koderhan (30 Октябрь 2013 - 20:46) писал:
Здравствуйте! Двигаемся далее)). Прикрепил скриншот, где показаны те места, где хотелось бы изменить цвет фона, либо вставить свою картинку, а также хотелось бы немного раздвинуть фон левой полосы, поскольку все элементы прижаты в упор к краю...
#10
Отправлено 15 Ноябрь 2013 - 11:51
Prorock_Ugl (14 Ноябрь 2013 - 21:53) писал:
В конец файла "main.css".
Добавить код:
.row .span4 { overflow: hidden; padding-left: 4px; width: 220px; } .span44.hidden-phone p { width: 210px; } .footer .payment-sistems table { width: 202px; }Для изменения фона левой калонки под меню.
В конец файла "main.css".
Добавить код:
.row .span4 { background: gray;/*цвет левой калонки.*/ } .menu_main > ul { background: initial; }
Для изменения цвета под каталогом товаров.
В конец файла "main.css".
Добавить код:
.row-fluid .span7 { background: gray;/* цвет правой части сайта под каталогом товаров */ }
Для изменения полного фона в правой части сайта.
В конец файла "main.css".
Добавить код:
.container .row .span8 { background: gray; /* полный цвет правой части сайта. */ }
Боковые части сайта которые сейчас имеют синий оттенок изменить к сожалению затруднительно по отдельности. Можно загружать только одно большое изображения.
И банеры в этом месте тоже лучше не ставить так как это может нарушать адаптивность сайта.
#11
Отправлено 15 Ноябрь 2013 - 12:41
Koderhan (30 Октябрь 2013 - 17:27) писал:
Это можно добавить таким кодом.
body { background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat; }
Спасибо. Хотелось бы уточнить такую вещь, если вставить квадратный (300х300 к примеру) кусок бесшовной текстуры, то он копируется только вертикально. Мне пришлось делать картинку полностью во всю длину экрана, тогда тексурой сайт заполняется правильно, но, соответственно увеличивается размер файла текстуры. Есть какой-либо способ вставки квадратной текстуры или я что-то неправильно делаю?
#12
Отправлено 15 Ноябрь 2013 - 13:15
Koderhan (15 Ноябрь 2013 - 11:51) писал:
И банеры в этом месте тоже лучше не ставить так как это может нарушать адаптивность сайта.
Уточните, пожалуйста, это о какой части речь идет, немного не понял?
И еще такой вот момент, можно ли сделать подобный эффект тени, как показано на прикрепленном примере?
#13
Отправлено 15 Ноябрь 2013 - 17:36
Prorock_Ugl (15 Ноябрь 2013 - 13:15) писал:
И еще такой вот момент, можно ли сделать подобный эффект тени, как показано на прикрепленном примере?
Для полного заполнения фона текстурой вы просто можете написать код так:
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat;repeat - означает повторять во все стороны.
http://htmlbook.ru/css/background
И для теней. Попробуйте добавить в конец файла main.css код:
#main, span8 { -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
#14
Отправлено 16 Ноябрь 2013 - 12:52
Koderhan (15 Ноябрь 2013 - 17:36) писал:
Для полного заполнения фона текстурой вы просто можете написать код так:
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat;repeat - означает повторять во все стороны.
http://htmlbook.ru/css/background
И для теней. Попробуйте добавить в конец файла main.css код:
#main, span8 { -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
Не получилось у меня с повтором во все стороны и с тенью тоже((
#15
Отправлено 18 Ноябрь 2013 - 14:15
#16
Отправлено 19 Ноябрь 2013 - 05:39
body { background: url("http://photopresent.storeland.net/site_bg.gif") 38.5% 0px repeat-y transparent; }нужно:
body { background: url("http://photopresent.storeland.net/site_bg.gif") 38.5% 0px repeat transparent; }
У вас было выставлено повторение фона только по вертикали.
На счет тени, данного стиля я у вас не обнаружила:
#main, span8 { -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
как вариант попробуйте прописать сл.образом:
#main, span8 { box-shadow: 1px 1px 1px #000; }
#17
Отправлено 19 Ноябрь 2013 - 10:56
Vaccina (19 Ноябрь 2013 - 05:39) писал:
body { background: url("http://photopresent.storeland.net/site_bg.gif") 38.5% 0px repeat-y transparent; }нужно:
body { background: url("http://photopresent.storeland.net/site_bg.gif") 38.5% 0px repeat transparent; }
У вас было выставлено повторение фона только по вертикали.
Не могу вообще найти подобную строку...
Vaccina (19 Ноябрь 2013 - 05:39) писал:
#main, span8 { -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
как вариант попробуйте прописать сл.образом:
#main, span8 { box-shadow: 1px 1px 1px #000; }
Был такой стиль, до слайдера...убрал, вставил ваш в конец файла-изменений нет...
#18
Отправлено 19 Ноябрь 2013 - 15:10
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных