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


Добавление Фона

фон

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

#1 xaurus

xaurus

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

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

Отправлено 16 Ноябрь 2016 - 20:39

Добрый вечер. Как я могу добавить фон? Аккаунт SL-399618

#2 Vaccina

Vaccina

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

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

Отправлено 17 Ноябрь 2016 - 06:23

Здравствуйте. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
body {
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #333333;
	overflow-x: hidden;
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: 0;
}

замените на:
body {
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #333333;
	overflow-x: hidden;
	position: relative;
	background: url('ссылка на фон') center center;
	margin: 0;
	padding: 0;
}

В замененном блоке измените
ссылка на фон


#3 xaurus

xaurus

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

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

Отправлено 17 Ноябрь 2016 - 10:35

Не находит через поиск

#4 Razon

Razon

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

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

Отправлено 17 Ноябрь 2016 - 10:38

Просмотр сообщенияxaurus (17 Ноябрь 2016 - 10:35) писал:

Не находит через поиск

Строка №2 в указанном файле.

#5 xaurus

xaurus

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

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

Отправлено 17 Ноябрь 2016 - 11:26

Прописал background: (<img src="{ASSETS_IMAGES_PATH}background.jpg" alt="" title="" />). Ничего не изменилось

#6 Razon

Razon

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

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

Отправлено 17 Ноябрь 2016 - 11:34

Просмотр сообщенияxaurus (17 Ноябрь 2016 - 11:26) писал:

Прописал background: (<img src="{ASSETS_IMAGES_PATH}background.jpg" alt="" title="" />). Ничего не изменилось

Мы видим,  что вам самостоятельно удалось справиться с данным вопросом.

#7 xaurus

xaurus

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

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

Отправлено 17 Ноябрь 2016 - 12:12

Возможно ли сделать чтобы фон в слайдах был прозрачным? В самих картинках я сделал прозрачным фон, но на сайте не изменилось

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

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


#8 Razon

Razon

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

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

Отправлено 17 Ноябрь 2016 - 12:35

Просмотр сообщенияxaurus (17 Ноябрь 2016 - 12:12) писал:

Возможно ли сделать чтобы фон в слайдах был прозрачным? В самих картинках я сделал прозрачным фон, но на сайте не изменилось

Данный фон задан  в изображениях,  при сохранения файла в формат .jpg  убрав фон,  он автоматически заменяется на белый.
Для сохранения изображения с прозрачным  фоном вам необходимо сохранять файлы в формате .png
Также заменить в коде, файл HTML
<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide5.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.jpg?design=sport" />

Где прописаны slide1.jpg  и тд. заменить на slide1.png  и тд.  соответственно загрузив изображения с нужным форматом.

#9 xaurus

xaurus

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

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

Отправлено 17 Ноябрь 2016 - 14:04

Спасибо, со всем разобрался, всё помогло

#10 kirussian

kirussian

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

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

Отправлено 07 Март 2017 - 22:36

Здравствуйте! я ничего не понимаю в html и т.п., но попытаюсь понять, если ответите на вопрос: в шаблоне Спорт на Главной и на странице Каталог фон белый везде. Хочу заменить его на картинку в тему спорта, возникают вопросы:
1. как (очень подробно) это сделать?
2. какой размер картинки рекомендуется, чтобы была растянута на всю страницу и отображалась корректно
3. какое расширение картинки? png ?

#11 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 08 Март 2017 - 09:46

Просмотр сообщенияkirussian (07 Март 2017 - 22:36) писал:

Здравствуйте! я ничего не понимаю в html и т.п., но попытаюсь понять, если ответите на вопрос: в шаблоне Спорт на Главной и на странице Каталог фон белый везде. Хочу заменить его на картинку в тему спорта, возникают вопросы:
1. как (очень подробно) это сделать?
2. какой размер картинки рекомендуется, чтобы была растянута на всю страницу и отображалась корректно
3. какое расширение картинки? png ?

Здравствуйте.
Для начала сообщите нам, пожалуйста, номер аккаунта вашего интернет-магазина.
Спасибо.

#12 kirussian

kirussian

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

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

Отправлено 08 Март 2017 - 12:16

SL-408620

#13 metry

metry

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

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

Отправлено 09 Март 2017 - 20:33

Добрый вечер. В инструкции выше хорошо описано, как вставить картинку вместо белого фона. Чтобы увидеть наглядный пример изменения фона, пожалуйста, зайдите в Редактор шаблонов-->СТИЛИ-->main.css

и в коде main.css найдите строку(она в самом начале):

body {font-family: Open Sans, sans-serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #333333;overflow-x: hidden;position: relative;background-color: #fff;margin:0;padding:0;}

и замените на:

body {font-family: Open Sans, sans-serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #333333;overflow-x: hidden;position: relative; background: url('https://storge.pic2.me/cm/1680x1050/399/52910abe1c6e5.jpg') center;margin:0;padding:0; background-attachment: fixed;}

для изменения фона на другую картинку, вставьте свою ссылку на картинку:
background: url('ссылка на фон') center;

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

#14 kirussian

kirussian

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

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

Отправлено 09 Март 2017 - 23:48

Просмотр сообщенияmetry (09 Март 2017 - 20:33) писал:

Добрый вечер. В инструкции выше хорошо описано, как вставить картинку вместо белого фона. Чтобы увидеть наглядный пример изменения фона, пожалуйста, зайдите в Редактор шаблонов-->СТИЛИ-->main.css

и в коде main.css найдите строку(она в самом начале):

body {font-family: Open Sans, sans-serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #333333;overflow-x: hidden;position: relative;background-color: #fff;margin:0;padding:0;}

и замените на:

body {font-family: Open Sans, sans-serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #333333;overflow-x: hidden;position: relative; background: url('https://storge.pic2.me/cm/1680x1050/399/52910abe1c6e5.jpg') center;margin:0;padding:0; background-attachment: fixed;}

для изменения фона на другую картинку, вставьте свою ссылку на картинку:
background: url('ссылка на фон') center;

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

Спасибо, так работает. Вопрос: а как сделать добавление фона без ссылки в виде url ? Таким способом получается, что фон должен быть где-то в интернете + там придется искать png. А если сохранить к себе картинку в редактор, и уже на нее завязаться?

#15 metry

metry

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

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

Отправлено 10 Март 2017 - 09:39

Добрый день.  Для добавления картинки с Ваших ресурсов, зайдите,пожалуйста, в Редактор шаблонов-->Добавить файлы( загружаете нужную Вам картинку с Вашего компьютера).

Далее заходите в Редактор шаблонов-->main.css

и находите строку:

body {font-family: Open Sans, sans-serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #333333;overflow-x: hidden;position: relative;background-color: #fff;margin:0;padding:0;}

и замените на:
body {font-family: Open Sans, sans-serif;font-size: 14px;line-height: 18px;font-weight: 400;color: #333333;overflow-x: hidden;position: relative;background: url("{ASSETS_IMAGES_PATH}НАЗВАНИЕ КАРТИНКИ") center;margin:0;padding:0; background-attachment: fixed;}


для background: url("{ASSETS_IMAGES_PATH}НАЗВАНИЕ КАРТИНКИ")   указываете название загруженной Вами картинки.

#16 Damba

Damba

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

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

Отправлено 11 Март 2018 - 14:52

Добрый день, аккаунт SL-446462
1) можно ли сделать фон не на весь экран а по бокам и сверху (закреп)
2) можно ли сделать отдельные части фона кликабельными?

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

  • 1.jpg


#17 Damba

Damba

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

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

Отправлено 12 Март 2018 - 10:28

Жду ответа...

#18 Damba

Damba

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

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

Отправлено 12 Март 2018 - 17:41

:blink: :blink: :blink: :huh:

#19 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 13 Март 2018 - 16:37

Просмотр сообщенияDamba (11 Март 2018 - 14:52) писал:

Добрый день, аккаунт SL-446462
1) можно ли сделать фон не на весь экран а по бокам и сверху (закреп)
2) можно ли сделать отдельные части фона кликабельными?

Здравствуйте.
Извините за ожидание.
На представленном примере - фон, это специально подготовленная картинка с пустотой по центру. Вы можете сделать такую же, либо можно залить сейчас блок с контентом белым цветом.
Будет выглядеть, как на скриншоте в приложении.
Для этого найдите в main.css код:
.col-right {float: right !important;}

Замените на:
.col-right {float: right !important;}
#main .col-right:before {
	content:'';
	background: #fff;
	position:absolute;
	z-index: -1;
	left:15px;
	right:15px;
	width: auto;
	height:100%;
}
#main .col-right > div:not(:first-child) {
	padding:0 15px;
}

2. Это возможно. К примеру можно наложить прозрачные блоки с ссылками на боковую, либо верхнюю часть, как сделано в примере.

#20 Damba

Damba

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

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

Отправлено 13 Март 2018 - 18:50

Просмотр сообщенияFirefly (13 Март 2018 - 16:37) писал:

Здравствуйте.
Извините за ожидание.
На представленном примере - фон, это специально подготовленная картинка с пустотой по центру. Вы можете сделать такую же, либо можно залить сейчас блок с контентом белым цветом.
Будет выглядеть, как на скриншоте в приложении.
Для этого найдите в main.css код:
.col-right {float: right !important;}

Замените на:
.col-right {float: right !important;}
#main .col-right:before {
content:'';
background: #fff;
position:absolute;
z-index: -1;
left:15px;
right:15px;
width: auto;
height:100%;
}
#main .col-right > div:not(:first-child) {
padding:0 15px;
}

2. Это возможно. К примеру можно наложить прозрачные блоки с ссылками на боковую, либо верхнюю часть, как сделано в примере.

1) После замены кода ничего не меняется, и что должно поменяться я не совсем понял, поясните пожалуйста...
2) как можно наложить прозрачные блоки?)





Темы с аналогичным тегами фон

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

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