#1
Отправлено 16 Ноябрь 2016 - 20:39
#2
Отправлено 17 Ноябрь 2016 - 06:23
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
Отправлено 17 Ноябрь 2016 - 10:35
#5
Отправлено 17 Ноябрь 2016 - 11:26
#8
Отправлено 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
Отправлено 17 Ноябрь 2016 - 14:04
#10
Отправлено 07 Март 2017 - 22:36
1. как (очень подробно) это сделать?
2. какой размер картинки рекомендуется, чтобы была растянута на всю страницу и отображалась корректно
3. какое расширение картинки? png ?
#11
Отправлено 08 Март 2017 - 09:46
kirussian (07 Март 2017 - 22:36) писал:
1. как (очень подробно) это сделать?
2. какой размер картинки рекомендуется, чтобы была растянута на всю страницу и отображалась корректно
3. какое расширение картинки? png ?
Здравствуйте.
Для начала сообщите нам, пожалуйста, номер аккаунта вашего интернет-магазина.
Спасибо.
#12
Отправлено 08 Март 2017 - 12:16
#13
Отправлено 09 Март 2017 - 20:33
и в коде 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
Отправлено 09 Март 2017 - 23:48
metry (09 Март 2017 - 20:33) писал:
и в коде 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
Отправлено 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}НАЗВАНИЕ КАРТИНКИ") указываете название загруженной Вами картинки.
#17
Отправлено 12 Март 2018 - 10:28
#18
Отправлено 12 Март 2018 - 17:41
#19
Отправлено 13 Март 2018 - 16:37
Damba (11 Март 2018 - 14:52) писал:
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
Отправлено 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 анонимных