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


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

фон

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

#21 Damba

Damba

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

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

Отправлено 13 Март 2018 - 19:00

и как сильно влияет размер изображения (фон) на скорость загружаемости сайта?

#22 Vaccina

Vaccina

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

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

Отправлено 14 Март 2018 - 01:30

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.wrapper {
								background: #fff url("https://shop.kz/images/oneplus6_1.jpg") repeat;
								background-size: cover;
}

замените на:
.wrapper {background: #fff url("https://shop.kz/images/oneplus6_1.jpg") no-repeat center top;}
После данного изменения контент будет находиться по центру данного фона.

также можно опустить шапку сайта, которая на данный момент перекрывает надпись фона, для этого найдите:
#header {margin-bottom: 20px;}

замените на:
#header {margin-bottom: 20px;margin-top: 60px;}


Размер изображения не влияет на загрузку страницы, на загрузку влияет вес фона, чем меньше весит файл, тем быстрее он загрузится на странице. Фон лучше загрузить к себе на сайт в раздел Сайт - Редактор шаблонов и заменить ссылку на него.

#23 Damba

Damba

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

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

Отправлено 18 Март 2018 - 22:28

Просмотр сообщенияVaccina (14 Март 2018 - 01:30) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.wrapper {
background: #fff url("https://shop.kz/images/oneplus6_1.jpg") repeat;
background-size: cover;
}

замените на:
.wrapper {background: #fff url("https://shop.kz/images/oneplus6_1.jpg") no-repeat center top;}
После данного изменения контент будет находиться по центру данного фона.

также можно опустить шапку сайта, которая на данный момент перекрывает надпись фона, для этого найдите:
#header {margin-bottom: 20px;}

замените на:
#header {margin-bottom: 20px;margin-top: 60px;}


Размер изображения не влияет на загрузку страницы, на загрузку влияет вес фона, чем меньше весит файл, тем быстрее он загрузится на странице. Фон лучше загрузить к себе на сайт в раздел Сайт - Редактор шаблонов и заменить ссылку на него.

1)помогите пожалуйста с фоном, как все таки сделать кликабельные "стороны" фона
2)почему блок стал уже? можно его расширить? ( скрин )

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

  • орп.png


#24 Damba

Damba

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

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

Отправлено 19 Март 2018 - 12:33

??

#25 Mr.Nito

Mr.Nito

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

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

Отправлено 20 Март 2018 - 11:10

Просмотр сообщенияDamba (18 Март 2018 - 22:28) писал:

1)помогите пожалуйста с фоном, как все таки сделать кликабельные "стороны" фона
2)почему блок стал уже? можно его расширить? ( скрин )
1. В шаблоне HTML
после
<body>
<div class="wrapper">
добавил код
<a class="link-bg link-bg--top" href="#test"></a>
<a class="link-bg link-bg--left" href="#test"></a>
<a class="link-bg link-bg--right" href="#test"></a>

замените в нём #test на свои ссылки


В main.css в конце добавил код
/*Ccылки на изображения*/
.wrapper {position: relative;}
.link-bg {
position:absolute;
display: block;
}
.link-bg--top {
max-width: 1170px;
width: 100%;
height: 60px;
left: 50%;
transform: translateX(-50%);
}
.link-bg--left,
.link-bg--right {
top: 85px;
width: calc( (100% - 1170px) / 2);
height: 100%;
}
.link-bg--left {
left: 0;
}	
.link-bg--right {
right: 0;
}
2. Блок поправил

#26 Damba

Damba

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

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

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

Просмотр сообщенияMr.Nito (20 Март 2018 - 11:10) писал:

1. В шаблоне HTML
после
<body>
<div class="wrapper">
добавил код
<a class="link-bg link-bg--top" href="#test"></a>
<a class="link-bg link-bg--left" href="#test"></a>
<a class="link-bg link-bg--right" href="#test"></a>

замените в нём #test на свои ссылки


В main.css в конце добавил код
/*Ccылки на изображения*/
.wrapper {position: relative;}
.link-bg {
position:absolute;
display: block;
}
.link-bg--top {
max-width: 1170px;
width: 100%;
height: 60px;
left: 50%;
transform: translateX(-50%);
}
.link-bg--left,
.link-bg--right {
top: 85px;
width: calc( (100% - 1170px) / 2);
height: 100%;
}
.link-bg--left {
left: 0;
}	
.link-bg--right {
right: 0;
}
2. Блок поправил
спасибо все как надо.
но появилась новая проблема, когда заходишь через ноут то фон урезается по бокам и не видно см по 3...как это можно исправить?

#27 Mr.Nito

Mr.Nito

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

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

Отправлено 21 Март 2018 - 16:42

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

спасибо все как надо.
но появилась новая проблема, когда заходишь через ноут то фон урезается по бокам и не видно см по 3...как это можно исправить?
Отображение поправил в main.css

.wrapper {background: #fff url("888.jpg") no-repeat center top;}

на

.wrapper {background: #fff url("888.jpg") no-repeat center top;background-size: contain;}


#28 Damba

Damba

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

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

Отправлено 24 Март 2018 - 14:33

Просмотр сообщенияMr.Nito (21 Март 2018 - 16:42) писал:

Отображение поправил в main.css

.wrapper {background: #fff url("888.jpg") no-repeat center top;}

на

.wrapper {background: #fff url("888.jpg") no-repeat center top;background-size: contain;}
1)При переходе в карзину съезжает фон, как можно поправить ?
2)и можно сделать изменения по скрину ( и значок корзины увеличить что бы гармонично смотрелось с основной менюшкой )
3)убрать виджеты внизу

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

  • Opera Снимок_2018-03-24_153000_kzshop24.ru.png


#29 Mr.Nito

Mr.Nito

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

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

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

1) Фон в корзине поправил
2) Данный блок используется и в мобильной версии, изменяя его придётся менять всю шапку
3) Убрать виджеты соц сетей
в main.css
#footer-middle .footer-content .link-follow {overflow: hidden;width: 210px;margin: 20px auto;}
замените на
#footer-middle .footer-content .link-follow {overflow: hidden;width: 210px;margin: 20px auto; display:none}






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

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

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