Перейти к содержимому


Статичный Фон Сайта


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 55

#1 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 29 Октябрь 2013 - 20:48

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

#2 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 30 Октябрь 2013 - 02:02

Да, это можно сделать. Достаточно фону задать параметр fixed. Например в файл стилей main.css добавить правило

body {
   background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat fixed;
}

после останется загрузить изображение site_bg.gif или изменить существующее изображение.

#3 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 30 Октябрь 2013 - 10:39

Просмотр сообщенияСake (30 Октябрь 2013 - 02:02) писал:

Да, это можно сделать. Достаточно фону задать параметр fixed. Например в файл стилей main.css добавить правило

body {
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat fixed;
}

после останется загрузить изображение site_bg.gif или изменить существующее изображение.

Спасибо, скажите.Сама картинка фона должна быть по максимальному размеру страницы..?и , я так понимаю, чем тяжелее файл(к примеру картинка с высоким разрешением), тем дольше будет грузиться сайт. Есть способы оптимизировать фон, с минимальной потерей качества?

#4 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 30 Октябрь 2013 - 12:55

Просмотр сообщенияProrock_Ugl (30 Октябрь 2013 - 10:39) писал:

Спасибо, скажите.Сама картинка фона должна быть по максимальному размеру страницы..?и , я так понимаю, чем тяжелее файл(к примеру картинка с высоким разрешением), тем дольше будет грузиться сайт. Есть способы оптимизировать фон, с минимальной потерей качества?
Самое хорошее оптимизация это отсутствие фона.

#5 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 30 Октябрь 2013 - 13:20

Просмотр сообщенияKoderhan (30 Октябрь 2013 - 12:55) писал:

Самое хорошее оптимизация это отсутствие фона.

Тут конечно не поспоришь..но выглядит очень скучно...

#6 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 30 Октябрь 2013 - 17:27

Просмотр сообщенияProrock_Ugl (30 Октябрь 2013 - 13:20) писал:

Тут конечно не поспоришь..но выглядит очень скучно...
Но думаю пользователи в магазин приходят чтобы покупать... Можно добавить маленькие изображения которые будут повторяться и заполнять все пространство. Какую то текстуру ...
Это можно добавить таким кодом.
body {
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat;
}


#7 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 30 Октябрь 2013 - 20:41

Просмотр сообщенияKoderhan (30 Октябрь 2013 - 17:27) писал:

Но думаю пользователи в магазин приходят чтобы покупать... Можно добавить маленькие изображения которые будут повторяться и заполнять все пространство. Какую то текстуру ...
Это можно добавить таким кодом.
body {
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat;
}

Т.е. грубо говоря, подобрать текстуру, чтобы она состыковывалась без видимых швов?

#8 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 30 Октябрь 2013 - 20:46

Просмотр сообщенияProrock_Ugl (30 Октябрь 2013 - 20:41) писал:

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

#9 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 14 Ноябрь 2013 - 21:53

Просмотр сообщенияKoderhan (30 Октябрь 2013 - 20:46) писал:

Да. В сети думаю есть уже бесплатные картинки которые подходили бы для фона магазина.

Здравствуйте! Двигаемся далее)). Прикрепил скриншот, где показаны те места, где хотелось бы изменить цвет фона, либо вставить свою картинку, а также хотелось бы немного раздвинуть фон левой полосы, поскольку все элементы прижаты в упор к краю...

Прикрепленные изображения

  • скрин7.jpg


#10 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 15 Ноябрь 2013 - 12:41

Спасибо, буду пробовать. У меня еще вопросик

Просмотр сообщенияKoderhan (30 Октябрь 2013 - 17:27) писал:

Но думаю пользователи в магазин приходят чтобы покупать... Можно добавить маленькие изображения которые будут повторяться и заполнять все пространство. Какую то текстуру ...
Это можно добавить таким кодом.
body {
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat;
}

Спасибо. Хотелось бы уточнить такую вещь, если вставить квадратный (300х300 к примеру) кусок бесшовной текстуры, то он копируется только вертикально. Мне пришлось делать картинку полностью во всю длину экрана, тогда тексурой сайт заполняется правильно, но, соответственно увеличивается размер файла текстуры. Есть какой-либо способ вставки квадратной текстуры или я что-то неправильно делаю?

#12 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 15 Ноябрь 2013 - 13:15

Просмотр сообщенияKoderhan (15 Ноябрь 2013 - 11:51) писал:

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

Уточните, пожалуйста, это о какой части речь идет, немного не понял?

И еще такой вот момент, можно ли сделать подобный эффект тени, как показано на прикрепленном примере?

Прикрепленные изображения

  • Без имени-6.jpg


#13 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 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 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 18 Ноябрь 2013 - 14:15

Поможете разобраться?

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 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 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 19 Ноябрь 2013 - 15:10

Помогите, пожалуйста, топчусь на месте((

#19 ne_yana

ne_yana

    Активный участник

  • Модератоpы
  • 1 190 сообщений

Отправлено 19 Ноябрь 2013 - 15:39

Просмотр сообщенияProrock_Ugl (19 Ноябрь 2013 - 15:10) писал:

Помогите, пожалуйста, топчусь на месте((
Здравствуйте, этот код
  body { background:  url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat-y 38.5% 0;}
находится в файле bootstrap-responsive.min.css

#20 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 19 Ноябрь 2013 - 15:45

Просмотр сообщенияne_yana (19 Ноябрь 2013 - 15:39) писал:

Здравствуйте, этот код
body { background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat-y 38.5% 0;}
находится в файле bootstrap-responsive.min.css

Отлично, спасибо. Получилось)

А на счет тени поможете?




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных