@blazer05

Как применить фон ко всей странице сайта?

Здравствуйте.
Нужна помощь. Страница сайта разбита на три элемента и каждый элемент имел свой фон. Как применить один фон ко всем трем элементам? Посмотреть можно здесь myshop.sharelink.ru . Сейчас я сделал один и тот же фон для каждой секции, но он не совпадает друг с другом
5a0fdda014c92009204708.png
можно это как то подогнать и выровнять, чтоб было одинаково? Или же как его применить ко всей странице?
  • Вопрос задан
  • 168 просмотров
Решения вопроса 1
@ned4ded
Верстка, Фронтенд
Добрый день!

К сожалению, бесшевно подогнать такой фон невозможно, тому есть объективные причины:

1) Ваш фон имеет неравномерный параметр inner shadow.
2) Высота секций отличается друг от друга, фон каждый секции будет обрезаться в рандомном, непредсказуемом месте (bg-size: cover);
3) Видно, что фон на картинке заканчивается не в том месте паттерна, в котором начинается (т.е. если поставить две эти картинки друг на друга, то они не будут стыковаться).

Что можно сделать? Вам придется поработать с изображением, я предполагаю, что вы владеете ps и он у вас установлен. И тут возможно два варианта развития событий:

А) Простой. У вас в psd шаблоне картинка фона и <конуса-колуна + стикера> не объединены и вы можете ее экспортировать отдельно. Тогда вам нужно:
а.1) Создать из фона паттерн. Делать это придется подбором, если дизайнер вам не подвез паттерна.
а.2) Применить паттерн фона к body с bg-repeat: repeat. Если фон имеет "вклееную" внутреннюю тень, то не забудьте осветлить изображение, чтобы оно было идентично по цветовой политре середине bg, или создайте паттерн из середины (как будет удобнее);
а.3) Наложить на каждую секцию inner shadow.

Б) Сложный случай, если ваш фон с конус-колуном представлен единым, неразделенным файлом. Тогда вам нужно выполнить весь А и подбирать bg-position для body попиксельно. Любое увеличение высоты первой секции повлечен за собой появление шва. Но выбора особого у вас нет.

PS bg-size: cover скалирует изображение, подгоняя его под размер блока. Это еще одна проблема, которая вызовет шев. Уберите cover, поставьте 100%; В этом случае без repeat у вас появятся пустые области сверху и снизу, прикрыть которые можно тем же паттерном, что я описал в пунктах А-Б.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы