Замостить фон что это

как замостить картинку в фотошопе

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

Лучший ответ

автоматом помоему никак. создаешь изображение нужного тебе размера. перетягиваешь в него картинку. и нажимаешь контл -J. столько раз. сколько копий тебе надо. и потом переключаясь между слоями инструментом перемещение растаскиваешь их как тебя надо. .
может и более простой способ есть. но я только такой знаю. .
если непонятно. пиши в агент подскажу

Остальные ответы
может поможет http://turbobit.net/800s2o19yamz.html

ТАм есть пункт РАСТЯНУТЬ, выберите его должно получиться. Или можно увеличить размеры самого изображения в меню ИЗОБРАЖЕНИЕ

Редактор Wix: фоновые изображения на мобильном сайте

Оптимизируйте сайт для мобильных устройств. Вы можете выбрать фон для мобильного сайта, отличный от фона для полной версии сайта. Настройте прозрачность, масштаб изображения и при желании добавьте эффект прокрутки.

• Выбор фона изображения для мобильного устройства
• Настройка фона изображений на мобильном устройстве

Выбор фонового изображения для мобильного сайта

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

Чтобы выбрать фоновое изображение для мобильного сайта:

1. Нажмите Фон в левой части мобильного редактора.
2. Выберите Фото.
3. (В медиаменеджере) Вы можете загрузить собственное изображение, использовать бесплатное изображение Wix или даже купить изображение у Shutterstock / Unsplash. Подробнее
4. Нажмите Изменить фон.
5. (Необязательно) Нажмите Добавить на другие страницы, чтобы применить фон к другим страницам сайта.

Настройка фона изображений на мобильном

Настройте фон изображения, чтобы он выглядел именно так, как нужно.

Чтобы настроить фон изображения на мобильном сайте:

1. Нажмите Фон в левой части мобильного редактора.
2. Нажмите Настроить.
3. Отредактируйте следующие параметры:
   • Прозрачность изображения: перетащите ползунок, чтобы увеличить или уменьшить прозрачность фона.
   • Цвет за изображением: нажмите на поле цвета и выберите цвет из палитры цветов.
     Это полезно, если вы уменьшаете прозрачность изображения и хотите, чтобы за ним был цвет.
   • Эффекты прокрутки:
     • Нет: эффект прокрутки отсутствует.
     • Зафиксировать: фоновое изображение зафиксировано. Оно не перемещается при прокрутке.
   • Как разместить фото?
     • Заполнить: фоновое изображение отображается в исходном размере.
     • Подогнать: фоновое изображение сохраняет пропорции между шириной и высотой.
     • Замостить: фон отображает определенную часть изображения. Этот раздел можно изменить с помощью поля Выберите позицию фото.
     • Выберите позицию фото: выберите положение в сетке, чтобы настроить, какая часть изображения находится в фокусе.

Сотбит: Оригами — Для пользователя — Настройка главной страницы — Настройки фона, фонового изображения

Раздел «Дизайн» в режиме конструктора сайта интернет-магазина «Оригами» предоставляет пользователю следующий функционал:

1. настройка внутренних отступов блока;
2. настройка цвета фона;
3. настройка фонового изображения.

Далее будут показаны возможности визуальных настроек на примере блока комбинированный баннер.

Настройка внутренних отступов

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

Внутренний отступ сверху – меняет расстояние между областью контента и верхним краем блока.

Внутренний отступ снизу – меняет расстояние между областью контента и нижним краем блока.

Внутренний отступ слева – меняет расстояние между областью контента и левым краем блока.

Внутренний отступ справа – меняет расстояние между областью контента и правым краем блока.

Настройки отступов сверху и снизу изменяют границы самого блока, расширяя или сужая их соответственно.

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

Настройка фона блока

Для добавления однотонного фона блока существует настройка «Фон блока».

Она включает в себя кнопку «Цвет фона» с выпадающей стандартной палитрой цветов и строку, где выводится действующий цвет фона в кодировке HEX color.

Если из приведенных в стандартной палитре цветов ни один не подошёл, вы можете вставить в строку HEX-код нужного цвета и нажать клавишу «Enter». Данный цвет применится к блоку.

Для возврата к стандартному цвету блока, нажмите на кнопку «По умолчанию».

Фоновое изображение. Настройки фонового изображения

Фон любого из блоков можно оформить фоновым изображением. Также, фон блока можно комбинировать добавив и цветовую заливку, и изображение.

Для добавления фонового изображения воспользуйтесь соответствующим пунктом меню.

Важно учитывать условие написанное мелким шрифтом.

Нажмите на кнопку «Добавить изображение», в выпавшем меню найдите нужный файл и нажмите кнопку «Открыть». Выбранное изображение автоматически добавится в фон блока.

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

• Растянуть изображение – если реальный размер изображения в пикселях близок к размеру фона блока.
• Замостить фон – если реальный размер изображения в пикселях сильно меньше размера фона.

Если автоматическое добавление изображения выдало нежелательный результат, либо требуется дополнительная настройка, следует воспользоваться пунктами меню, приведенными ниже.

Далее будет рассмотрен каждый пункт отдельно:

Положение фонового изображения

Данный пункт настройки позволяет менять расположение изображения поля фона блока.

Переменная 1 – отвечает за перемещение по горизонтали.

Переменная 2 – отвечает за перемещение по вертикали.

Правила заполнения настройки: Переменная1%_пробел_Переменная2%

В значения переменных записываются только двузначные числа от 01 до 99. Данные значения показывают насколько далеко центр изображения подвинется от левого края (Переменная 1) и верхнего края (Переменная 2) блока.

Примеры использования:

Для примеров будет использоваться логотип Сотбит размером 500х500 пикселей.

Растягивание изображения

При добавлении логотипа Сотбит и установке значения масштабирования cover (растянуть), изображение приобретет вид показанный на скриншоте ниже. Почему так, описано в разделе Масштабирование фонового изображения.

Для выставления фонового изображения в центр нужно ввести в строке Положение фонового изображения значение 50% 50%.

Как видно, центр изображения совместился с центром фоновой области блока.

Меняя значения в строке, можно подогнать положение изображения до желаемого результата.

В данном случае, при изменении Переменной 1, перемещений по горизонтали происходить не будет, так как изображение заняло всю область фона по ширине.

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

Имея логотип в верхнем левом углу, при установке необходимых значений положения можно перенести его в любое место фона, например в нижний правый угол.

Размножение изображения

При изменении параметров размножения, стоит использовать такой же порядок действий для достижения желаемого положения «плиток» на фоне.

Стандартное расположение «плиток»:

Расположение после изменения параметров на 45% 65%:

Для ввода Переменной1 и Переменной2 допускаются также отрицательные значения.

Повторять фоновое изображение

Данная настройка нужна для включения, выключения и изменения параметров повторения изображения.

Настройка работает только при выбранном параметре Масштабирование фонового изображения: contain (размножить).

В случаях, когда при Масштабирование фонового изображения: auto, происходит размножение, настройка также работает.

Параметры и их значения: no-repeat – не повторять изображение.

repeat – повторять изображение.

repeat-x – повторять только по горизонтали.

repeat-y – повторять только по вертикали.

пустая строка – автоматическая настройка повторения.

Масштабирование фонового изображения. Абсолютное значение масштабирования.

Масштабирование фонового изображения – данная настройка позволяет настроить заполнение фона изображением.

cover – растянуть.

contain – размножить.

auto – автоматическое заполнение.

При настройке cover растягивание изображения выполняется по определенным параметрам:

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

При неравных сторонах изображения – изображение растягивается по меньшей стороне. Правила позиционирования остаются такими же.

В случае активной настройки contain, правило размножает изображение в соответствии с заданным масштабированием и условием повторения изображения. При отсутствии этих условий, правило выполняется как при настройке auto.

При настройке auto правила заполнения фона формируются исходя из реального размера изображения.

Если одна из сторон реального размера изображения равна или приблизительно равна соответствующей стороне видимой области фона блока, правило сопоставит эти стороны друг с другом и размножит изображение по другой стороне.

В фон данного блока добавлено изображение 500х500 пикселей. Правило сопоставило высоты фона блока и изображения, и размножило изображение только по горизонтали, применив настройку repeat-x.

Абсолютное значение масштабирования – в данной строке настраивается соотношение сторон фонового изображения вручную. Переменные вводятся в формате относительных единиц: ЕМ и %.

ЕМ – относительная единица изиерения, которая соотносится с размером шрифта родителя (в данном случае блока).

% – единица, которая соотносится с размером видимой области фона блока.

Правило заполнения: Значение1_пробел_Значение2.

Значение1 – отвечает за масштабирование по горизонтали.

Значение2 – отвечает за масштабирование по вертикали.

Если введено только одно значение, оно применится к обеим сторонам изображения.

Значения не обязательно должны указываться в одинаковых единицах измерения. Значение1 может быть в %, а Значение2 в ЕМ и наоборот.

После заполнения строки Абсолютное значение масштабирования как в примере ниже:

фоновое изображение стало выглядеть следующим образом:

В результате получилось изображение, занимающее 5% от ширины видимой области фона блока и шириной 35ем.

Фиксировать фоновое изображение

Данная настройка позволяет задать поведение фонового изображения при прокрутке содержимого страницы.

fixed – Делает фоновое изображение элемента неподвижным относительно контента в блоке.

scroll – Позволяет перемещаться фону вместе с содержимым.

local – Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

Пустая строка – стандартная настройка фиксации изображения.

Границы фона и фонового изображения. Область позиционирования фонового рисунка

Границы фона и фонового изображения – параметр указывает в каких границах должен находиться фон или фоновый рисунок.

Область позиционирования фонового рисунка – параметр указывает относительно какой области должен позиционироваться фоновый рисунок.

Оба параметра имеют схожие настройки:

Padding box — это область, включающая в себя внутреннюю область элемента и область, задаваемую свойством padding, но не включает границы.

Border box – включает в себя область внутри границы элемента и площадь под самой границей.

Content box — это внутренняя область элемента, в границах которой расположено контентное наполнение блока.

Нужна помощь в настройке решения

Оставьте заявку и мы свяжемся с вами!

Pattern в качестве фонового изображения

Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.

Чтобы было яснее, рассмотрим пример psd-макета страницы:

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

До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.

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

Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ — более медленный, но точный.

Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.

Описание выполняемых действий приведено в локализованной версии Photoshop.

Простое вырезание фона

Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.

В этом случае нужно поступить только одним способом.

Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .

Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера

50x50px

100x100px

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

Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.

Вырезание фрагмента фона

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

Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.

Pattern в Photoshop

Третий способ основан на понятии

pattern

в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить

pattern

в нарисованном дизайнером psd-макете.

Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое

pattern

в двух словах.

Это образец узора какого-то определенного размера (который может быть любым) —