Страница 1 из 11
Форум сайта ZorNet.Ru » Раздел для uCoz » Вопросы по uCoz » Как сделать картинку на всю ширину CSS
Как сделать картинку на всю ширину CSS
Kosten
Дата: Понедельник, 20.11.2017, 13:59 | Сообщение 1
Администраторы
Сообщений:15987
Награды: 51


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

Вот код, где вид материала заменил.

Код
<div class="box" style="background:url($IMG_URL1$) no-repeat 50% 50%;">
<a href="$ENTRY_URL$"><div class="overlay">
<span class="search"><img src="http://forums.ucoz.com/Atreer/search.png"></span>
</div></a>
</div>


Как понимаю, зависит все от no-repeat 50% 50%; - где весь интернет перевернул и ответа не нашел, а 50% 50% отвечает за центр.

Что нужно сделать, чтоб на всю ширину картинка была.

Вот пример:



Сайт где проверяю и где установлено -

forums.ucoz.com

Код
background-position: 50% 50%;


картинка будет по центру;

Код
background-position: right bottom;


правый нижний угол;

Код
background-position: 50px 100px;


отступ 50px от левого края и 100px от верхнего;

Код
background-position: 0 100%;


левый нижний угол;

Код
background-position: left bottom;


левый нижний угол.

Так работает этот эффект, но как сказано, не все картинки идут на всю ширину, а только большие, как эта.

Прикрепления: 1252614.jpg(75Kb) · 5925057.jpg(38Kb)
Страна: (RU)
-SAM-
Дата: Понедельник, 20.11.2017, 14:24 | Сообщение 2
Vip
Сообщений:311
Награды: 16


Уже разбиралось здесь: нужно задать масштабирование, что идёт background-size:cover!important;width:100%;max-width:100% ... ну, а чтобы "штора" покрыла всё изображение, то убрать padding там нужно, а также закругление бортов чтобы было, как у изображения.

Страна: (UA)
Kosten
Дата: Понедельник, 20.11.2017, 14:25 | Сообщение 3
Администраторы
Сообщений:15987
Награды: 51


-SAM-, вот знаю, что разбор по этой теме был, реально вчера искал и сегодня, и не нашел. 07a
Страна: (RU)
Kosten
Дата: Понедельник, 20.11.2017, 14:30 | Сообщение 4
Администраторы
Сообщений:15987
Награды: 51


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

Заменить

no-repeat 50% 50%;

на

no-repeat;background-size: cover;
Страна: (RU)
-SAM-
Дата: Понедельник, 20.11.2017, 14:31 | Сообщение 5
Vip
Сообщений:311
Награды: 16


Kosten, http://htmlbook.ru/css/background-size - вот, если не нужно, чтобы фон делался так, как с cover.

Страна: (UA)
Kosten
Дата: Понедельник, 20.11.2017, 14:33 | Сообщение 6
Администраторы
Сообщений:15987
Награды: 51


-SAM-, плиз, подскажи, вчера ушитался на думку, просто на этом вид материалов не мог корректно вывести рейтинг под свой стиль.
Страна: (RU)
Kosten
Дата: Понедельник, 20.11.2017, 14:38 | Сообщение 7
Администраторы
Сообщений:15987
Награды: 51


Цитата -SAM- ()
вот, если не нужно, чтобы фон делался так, как с cover.

И так все выходи, но 100 много, так если только вверх показывать, то ставить.

Код
10% 10% no-repeat
Страна: (RU)
Форум сайта ZorNet.Ru » Раздел для uCoz » Вопросы по uCoz » Как сделать картинку на всю ширину CSS
Страница 1 из 11
Поиск: