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


Фон

Автор shreg1, 28 янв. 2011 12:03

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

#361 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 18 Декабрь 2012 - 14:09

Просмотр сообщенияlleshiy (18 Декабрь 2012 - 11:19) писал:

подвал сайта обрезался (черный фон там не на всю ширину экрана)

Можно сделать следующее:
вставьте в шаблоне HTML перед 
<div id="footer">
строчку
<div class="bgline"></div>
Сохранить.

Далее в файле main.css добавить в конце файла блок
.bgline {
position: absolute;
width: 100%;
background: #212121;
height: 80px;
}

#362 Асель

Асель

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

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

Отправлено 21 Декабрь 2012 - 01:06

как исправить?Только в мазиле так видит сайт,в остальных браузерах норм

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

  • Безымянный.jpg

#363 Vaccina

Vaccina

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

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

Отправлено 21 Декабрь 2012 - 02:35

На данный вопрос вам отвечали тут http://forum.storela...ину/#entry35265

#364 Михаил87

Михаил87

    Пользователь

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

Отправлено 27 Декабрь 2012 - 09:13

Подскажите пожалуйста как убрать вот это и растянуть фон на всю страницу???

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

  • Безымянный.png

#365 miyako

miyako

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

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

Отправлено 27 Декабрь 2012 - 11:04

Просмотр сообщенияМихаил87 (27 Декабрь 2012 - 09:13) писал:

Подскажите пожалуйста как убрать вот это и растянуть фон на всю страницу???

В панели управления магазином в разделе Сайт > Редактор тем > Стили и Скрипты найдите файл main.csstemplate найдите следующий код:
body {
  background-color: #212121;
  min-width: 960px;
  background-attachment: fixed;
  background-image: url("http://files.storeland.ru/web/upload/sitefiles/4/370/369962/5.jpg") ;
}
и замените  его на:
body {  
	background: white /*цвет фона под картинкой фона*/;
   background-image: url("http://files.storeland.ru/web/upload/sitefiles/4/370/369962/5.jpg");
min-width: 960px;
  background-attachment: fixed;
background-size:100%; /*размер фон.изобрадения*/
background-position:30% 0px; /*позиционирование по ширине и длине соответственно*/
background-repeat:no-repeat; /*Повторение (в данном случае без повторения)*/
background-attachment:fixed; /*в этом случае фоновое изображение не будет перемещаться при прокрутке страницы*/
}

#366 kaisyRUS

kaisyRUS

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

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

Отправлено 11 Январь 2013 - 10:56

Что-то не выходит
</head>
<body style="background:url("http://files.storeland.ru/web/upload/sitefiles/4/385/384640/bg.jpg") repeat-xy center center;">
<p id="back-top">
	 <a href="#top"><span></span>Вверх</a>
</p>
<div class="b_page" id="wrapper">
<div id="hdr">
	 <div class="top">

Надо чтоб эта картинка дублировалась заместо белого фона

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

  • bg.jpg

#367 Koderhan

Koderhan

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

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

Отправлено 11 Январь 2013 - 11:19

Просмотр сообщенияkaisyRUS (11 Январь 2013 - 10:56) писал:

Что-то не выходит
</head>
<body style="background:url("http://files.storeland.ru/web/upload/sitefiles/4/385/384640/bg.jpg") repeat-xy center center;">
<p id="back-top">
	 <a href="#top"><span></span>Вверх</a>
</p>
<div class="b_page" id="wrapper">
<div id="hdr">
	 <div class="top">

Надо чтоб эта картинка дублировалась заместо белого фона
Код:
repeat-xy center center;
Отменяет повторение фонового изображения

#368 kaisyRUS

kaisyRUS

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

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

Отправлено 11 Январь 2013 - 21:07

Просмотр сообщенияKoderhan (11 Январь 2013 - 11:19) писал:

Код:
repeat-xy center center;
Отменяет повторение фонового изображения
Убрал - все равно нету

#369 Koderhan

Koderhan

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

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

Отправлено 11 Январь 2013 - 21:10

Просмотр сообщенияkaisyRUS (11 Январь 2013 - 21:07) писал:

Убрал - все равно нету
Попробуйте изменить код в файле HTML.
Найти код:
<body style="background:url("http://files.storeland.ru/web/upload/sitefiles/4/385/384640/bg.jpg")">
Заменить:
<body>

#370 miyako

miyako

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

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

Отправлено 12 Январь 2013 - 07:30

Просмотр сообщенияkaisyRUS (11 Январь 2013 - 10:56) писал:

Что-то не выходит
</head>
<body style="background:url("http://files.storeland.ru/web/upload/sitefiles/4/385/384640/bg.jpg") repeat-xy center center;">
<p id="back-top">
	 <a href="#top"><span></span>Вверх</a>
</p>
<div class="b_page" id="wrapper">
<div id="hdr">
	 <div class="top">

Надо чтоб эта картинка дублировалась заместо белого фона

У вас в файле main.csstemplate два раза указаны стили для тега 
<body>
, соберите в один и замените код:
body {
  background: url(/web/upload/assets/images/83/82840/bg.jpg) #fff no-repeat center top;
  min-width: 965px;
}
body {
  font-family: Helvetica, Arial, sans-serif;
}
на:
body {
min-width: 965px;
font-family: Helvetica, Arial, sans-serif;
background: url({ASSETS_IMAGES_PATH}название картинки повторяющего фона) repeat ;
}

А также добавьте следующий код:
.body_fon{
background: url(/web/upload/assets/images/83/82840/bg.jpg) no-repeat center top;
}

В шаблоне HTML найдите следующий код:
<body style="background:url(" http:="" files.storeland.ru="" web="" upload="" sitefiles="" 4="" 385="" 384640="" bg.jpg")"="">
и замените его на:
<body>
<div class="body_fon">

Там же найдите код:
</body>
и перед ним вставьте следующий код:
</div>

#371 kaisyRUS

kaisyRUS

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

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

Отправлено 16 Январь 2013 - 10:13

Просмотр сообщенияmiyako (12 Январь 2013 - 07:30) писал:

У вас в файле main.csstemplate два раза указаны стили для тега 
<body>
, соберите в один и замените код:
body {
background: url(/web/upload/assets/images/83/82840/bg.jpg) #fff no-repeat center top;
min-width: 965px;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
на:
body {
min-width: 965px;
font-family: Helvetica, Arial, sans-serif;
background: url({ASSETS_IMAGES_PATH}название картинки повторяющего фона) repeat ;
}

А также добавьте следующий код:
.body_fon{
background: url(/web/upload/assets/images/83/82840/bg.jpg) no-repeat center top;
}

В шаблоне HTML найдите следующий код:
<body style="background:url(" http:="" files.storeland.ru="" web="" upload="" sitefiles="" 4="" 385="" 384640="" bg.jpg")"="">
и замените его на:
<body>
<div class="body_fon">

Там же найдите код:
</body>
и перед ним вставьте следующий код:
</div>
Шикарно. Переделал еще имеющийся фон на PNG, убрал белые пустоты на прозрачные. Красота

#372 KARASAKAL

KARASAKAL

    Пользователь

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

Отправлено 04 Февраль 2013 - 10:48

Просмотр сообщенияsupport (01 Март 2011 - 17:08) писал:

Вы изменяли фон тега body, он расположен под основными элементами, поэтому его не было видно.

Для шаблона сияние фон шапки отображается кодом в main.csstemplate:
.b_page {background: url({ASSETS_IMAGES_PATH}header_page.png) no-repeat center top;}
Здравствуйте я новичек в этом и тот же вопрос,а что тут изменить надо чтобы поменялся фон шапки или вставить картинку?

Для тела сайта:
#cpages {
background: url({ASSETS_IMAGES_PATH}cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
}
и полосочка разделитель сбоку - тоже фоновый рисунок:
.content_page {
background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 710px 68px;
overflow:hidden;
padding-bottom: 2em;
}

Для подвала сайта:
#footer {
background: url({ASSETS_IMAGES_PATH}footer_bg.jpg) no-repeat center top;
padding: 10px;
margin: 0px auto;
width: 940px;
height: 60px;
}

Соответственно изменяя стили для этих элементов можно установить нужный фон на вашем сайте. Я бы Вам советовал изучить технологию работы свойства background, думаю это существенно облегчит задачу.

Аналогично если не хочется изменять css файлы и требуется лишь изменить фоновые рисунки то они в разделе "Сайт" > "Редактор тем" в блоке "Файлы" нужно будет изменить следующие файлы:
Для шапки сайта:
header_page.png

Для тела сайта сверху:
cpage-top-bg.jpg

Для тела сайта, полосочка разделитель:
content-page-br.gif

Для подвала сайта:
footer_bg.jpg

#373 olegus67

olegus67

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

  • Пользователи
  • PipPipPip
  • 156 сообщений
  • ГородMoscow

Отправлено 15 Февраль 2013 - 16:49

Добрый день! можно ли на сайте немного поменять фон, добавить тень по бокам как на картинке. Сайт kindtoy.ru

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

  • Рисунок1.jpg

#374 Vaccina

Vaccina

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

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

Отправлено 15 Февраль 2013 - 21:23

Вам необходимо обвернуть весь сайт в дополнительный <div> по сути необходимо вставить после <body> тег <div id="wrapper-bg">
а перед </body> тег </div> и перенести стили из body в новый класс #wrapper-bg

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

#375 optomizkitaya

optomizkitaya

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

  • Пользователи
  • PipPipPip
  • 119 сообщений
  • ГородSpb

Отправлено 23 Февраль 2013 - 13:31

хочу сделать так, раньше пробовал просто цвет фона поменять, получалось что и внутри тела все заливалось, а надо только по бокам, как прописать?Безымянный.png
и вместо обычной заливки цветом хотел использовать текстуру, сильно ли это замедляет загрузку сайта?

#376 miyako

miyako

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

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

Отправлено 23 Февраль 2013 - 13:40

Просмотр сообщенияoptomizkitaya (23 Февраль 2013 - 13:31) писал:

хочу сделать так, раньше пробовал просто цвет фона поменять, получалось что и внутри тела все заливалось, а надо только по бокам, как прописать?Прикрепленный файл Безымянный.png
и вместо обычной заливки цветом хотел использовать текстуру, сильно ли это замедляет загрузку сайта?

Найдите в файле main.csstemplate код:
#wrapper {
[b]background-color: #FFFFFF; /*ваш цвет*/[/b]
padding-bottom: 10px;
}
и замените на любой цвет.
Далее найдите код:
#cpages {
background: url(http://design.fishkinatachku.ru/cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
}
и замените на:
#cpages {
background: url(http://design.fishkinatachku.ru/cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
[b]background-color: white; /*белый цвет контента*/[/b]
}

#377 ozBaikal

ozBaikal

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

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

Отправлено 02 Март 2013 - 20:41

Подскажите пожалуйста,как дополнительно к фону rgba навигационного меню и футера ,назначить дополнительный фон для старых браузеров,где rgba может отображаться не корректно или не отображаться вообще?Мой адрес http://streetof.ru

#378 miyako

miyako

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

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

Отправлено 03 Март 2013 - 07:41

Просмотр сообщенияozBaikal (02 Март 2013 - 20:41) писал:

Подскажите пожалуйста,как дополнительно к фону rgba навигационного меню и футера ,назначить дополнительный фон для старых браузеров,где rgba может отображаться не корректно или не отображаться вообще?

В каком браузере у вас не отображается? Посмотрите на скриншот, в нем указано возможность применения в браузерах.

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

  • rgba и браузеры.png

#379 ozBaikal

ozBaikal

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

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

Отправлено 03 Март 2013 - 11:09

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

#380 miyako

miyako

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

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

Отправлено 03 Март 2013 - 11:20

Просмотр сообщенияozBaikal (03 Март 2013 - 11:09) писал:

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

Например, такой код:
box_rgba
{
background-color: #B4B490;
background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#60B4B490',endColorstr='#60B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#60B4B490',endColorstr='#60B4B490')"; /* IE8
}
здесь rgba(180, 180, 144, 0.6) — координаты цвета в rgb, 0.6 — прозрачность. 1 это значит непрозрачный блок.
#60B4B490 — 60 — прозрачность (100 — непрозрачный), B4B490 — номер цвета
Также можете почитать статью по другим подобным хитростям - http://naikom.ru/blog/archives/434
Для оперы только так: http://zhuzhgov.ru/b...zrachnost-fona/
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Сияние
  5. → Изменение общей стилистики
  6. Privacy Policy