• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Как сделать картинку на всю ширину CSS
Kosten
Понедельник, 20 Ноября 2017, 13:59 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Приветствую,тема такая, поставил штору, что при наведение на вид материалов появляется прозрасно темный фон, но дело в том, что некоторые материалы, а точнее изображение не на всю ширину.

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

Код
<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 (74.9 Kb) · 5925057.jpg (38.2 Kb)
Страна: (RU)
-SAM-
Понедельник, 20 Ноября 2017, 14:24 | Сообщение 2
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
Уже разбиралось здесь: нужно задать масштабирование, что идёт background-size:cover!important;width:100%;max-width:100% ... ну, а чтобы "штора" покрыла всё изображение, то убрать padding там нужно, а также закругление бортов чтобы было, как у изображения.



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
Kosten
Понедельник, 20 Ноября 2017, 14:25 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
-SAM-, вот знаю, что разбор по этой теме был, реально вчера искал и сегодня, и не нашел. 07a
Страна: (RU)
Kosten
Понедельник, 20 Ноября 2017, 14:30 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Если только так поставить, но идет автоматический показ, хотя он и по идее должен.

Заменить

no-repeat 50% 50%;

на

no-repeat;background-size: cover;
Страна: (RU)
-SAM-
Понедельник, 20 Ноября 2017, 14:31 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
Kosten, http://htmlbook.ru/css/background-size - вот, если не нужно, чтобы фон делался так, как с cover.



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
Kosten
Понедельник, 20 Ноября 2017, 14:33 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
-SAM-, плиз, подскажи, вчера ушитался на думку, просто на этом вид материалов не мог корректно вывести рейтинг под свой стиль.
Страна: (RU)
Kosten
Понедельник, 20 Ноября 2017, 14:38 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Цитата -SAM- ()
вот, если не нужно, чтобы фон делался так, как с cover.

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

Код
10% 10% no-repeat
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: