Работа с картинками

@masterpiece · Регистрация: 01.08.2012

Author24 — интернет-сервис помощи студентам

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

@Fedor92 · 18.11.2014, 13:59

Не совсем понятно что Вы хотите сделать... Для повтора бекграунда например есть свойства repeat-x и repeat-y... А касательно темы позиционирования для бэкграунда можно задать значение расположения, например с помощью left или right ... Пример: background:url(images/pic.png) repeat-y left;

@and_y87 · 18.11.2014, 14:58

masterpiece, Fedor92, А также можно задать "метод заливки" через: background-size
<значение>
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
<проценты> Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

@Fedor92 · 18.11.2014, 15:05

and_y87, а причём тут background-size?

@and_y87 · 18.11.2014, 15:06

Fedor92, провсящаю

@Fedor92 · 18.11.2014, 15:06

Сообщение от and_y87

Fedor92, провсящаю

Смешно...

@and_y87 · 18.11.2014, 15:07

Но в целом если у него картинка больше в размере чем окно браузера он смог бы её подтянуть

Добавлено через 24 секунды
т.к. по описанию я ничего не понял чего хочет добиться ТС.

@Fedor92 · 18.11.2014, 15:09

Сообщение от and_y87

т.к. по описанию я ничего не понял чего хочет добиться ТС

Я подумал вырезать одну клавишу(пардон в данном случае три, чтобы был период...

) и сверху до низу сделать повторения с правого и с левого края страницы... Было бы грамотно, если так...

@and_y87 · 18.11.2014, 15:13

Сообщение от Fedor92

Я подумал вырезать одну клавишу и сверху до низу сделать повторения с правого и с левого края страницы

Fedor92, ну мы все понимаем что позиционироваться в одной плоскости в обе стороны нереально...
это всё ровно что в зад и вперед одновременно идти...

мне максимум что в голову приходит это повтор по вертикали(Y) и растянуть по ширине блока...

@Fedor92 · 18.11.2014, 15:24

Зацените...

Правда для левой стороны надо в фотошоп повернуть фото клавиши на 180 градусов...

@masterpiece · 18.11.2014, 15:26 **[ТС]**

Мне необходимо что бы так как на картинке отображалось и в браузере
Fedor92, Изначально я так и делала (только вырезала не клавиши, а блок) вырезала левый блок клавиш и правый блок клавиш установив repeat-y

CSS

1 2	background:url(img/left.jpg) repeat-y, url(img/right.jpg) 100% 0 repeat-y;

Но возникает вопрос как сделать тогда черную полоску внизу? На этот вопрос у меня нет пока ответа

Добавлено через 1 минуту
Fedor92, у меня тоже такое получалось) а черная полоска внизу?

@Fedor92 · 18.11.2014, 15:27

Сообщение от masterpiece

а черная полоска внизу?

Какая полоска?

А понял сейчас нарисую...

@masterpiece · 18.11.2014, 15:31 **[ТС]**

Fedor92, Когда Вы раскрываете картинку внизу есть такая часть

@Fedor92 · 18.11.2014, 15:36

Можно вот так довольно топорно, но действенно...

А вообще фон можно собрать из 3-х дивов, разумеется вложенных в body...

@masterpiece · 18.11.2014, 15:46 **[ТС]**

Fedor92, СПАСИБО ВАМ ОГРОМНОЕ!!!))))

@masterpiece 142 / 111 / 61 Регистрация: 01.08.2012 Сообщений: 297
		1
	Работа с картинками 18.11.2014, 12:58. Показов 1290. Ответов 14 Метки нет (Все метки) Доброе время суток! Подскажите пожалуйста как решить такую задачу (прикрепленная картинка). В интернете есть отдельные примеры как сделать повторение по вертикали и по горизонтали. А вот одновременно указывая позиции и повторение таких примеров нет. Миниатюры 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.11.2014, 13:59	2
	Не совсем понятно что Вы хотите сделать... Для повтора бекграунда например есть свойства repeat-x и repeat-y... А касательно темы позиционирования для бэкграунда можно задать значение расположения, например с помощью left или right ... Пример: background:url(images/pic.png) repeat-y left; 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	18.11.2014, 14:58	3
	masterpiece, Fedor92, А также можно задать "метод заливки" через: background-size *<значение>* Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. <проценты> Задает размер фоновой картинки в процентах от ширины или высоты элемента. *auto* Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. *cover* - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. *contain* - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.11.2014, 15:05	4
	and_y87, а причём тут background-size? 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	18.11.2014, 15:06	5
	Fedor92, провсящаю 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.11.2014, 15:06	6
	Сообщение от and_y87 Fedor92, провсящаю Смешно... 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	18.11.2014, 15:07	7
	Но в целом если у него картинка больше в размере чем окно браузера он смог бы её подтянуть Добавлено через 24 секунды т.к. по описанию я ничего не понял чего хочет добиться ТС. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.11.2014, 15:09	8
	Сообщение от and_y87 т.к. по описанию я ничего не понял чего хочет добиться ТС Я подумал вырезать одну клавишу(пардон в данном случае три, чтобы был период...) и сверху до низу сделать повторения с правого и с левого края страницы... Было бы грамотно, если так... 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	18.11.2014, 15:13	9
	Сообщение от Fedor92 Я подумал вырезать одну клавишу и сверху до низу сделать повторения с правого и с левого края страницы Fedor92, ну мы все понимаем что позиционироваться в одной плоскости в обе стороны нереально... это всё ровно что в зад и вперед одновременно идти... мне максимум что в голову приходит это повтор по вертикали(Y) и растянуть по ширине блока... 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.11.2014, 15:27	12
	Сообщение от masterpiece а черная полоска внизу? Какая полоска? А понял сейчас нарисую... 0

	18.11.2014, 15:46

@masterpiece 142 / 111 / 61 Регистрация: 01.08.2012 Сообщений: 297
	18.11.2014, 15:31 [ТС]	13
	Fedor92, Когда Вы раскрываете картинку внизу есть такая часть Миниатюры 0

@masterpiece 142 / 111 / 61 Регистрация: 01.08.2012 Сообщений: 297
	18.11.2014, 15:46 [ТС]	15
	Fedor92, СПАСИБО ВАМ ОГРОМНОЕ!!!)))) 0