|
Как сделать картинку на всю ширину CSS
|
|
Kosten |
Понедельник, 20 Ноября 2017, 13:59 | Сообщение 1 |
|
Приветствую,тема такая, поставил штору, что при наведение на вид материалов появляется прозрасно темный фон, но дело в том, что некоторые материалы, а точнее изображение не на всю ширину.
Вот код, где вид материала заменил.
Код <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;
левый нижний угол.
Так работает этот эффект, но как сказано, не все картинки идут на всю ширину, а только большие, как эта.
|
| [ RU ] |
|
|
-SAM- |
Понедельник, 20 Ноября 2017, 14:24 | Сообщение 2 |
|
Уже разбиралось здесь: нужно задать масштабирование, что идёт background-size:cover!important;width:100%;max-width:100% ... ну, а чтобы "штора" покрыла всё изображение, то убрать padding там нужно, а также закругление бортов чтобы было, как у изображения.
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
|
| [ UA ] |
|
|
Kosten |
Понедельник, 20 Ноября 2017, 14:25 | Сообщение 3 |
|
|
-SAM-, вот знаю, что разбор по этой теме был, реально вчера искал и сегодня, и не нашел. 
|
| [ RU ] |
|
|
Kosten |
Понедельник, 20 Ноября 2017, 14:30 | Сообщение 4 |
|
|
Если только так поставить, но идет автоматический показ, хотя он и по идее должен.
Заменить
no-repeat 50% 50%;
на
no-repeat;background-size: cover;
|
| [ RU ] |
|
|
-SAM- |
Понедельник, 20 Ноября 2017, 14:31 | Сообщение 5 |
|
|
Kosten, http://htmlbook.ru/css/background-size - вот, если не нужно, чтобы фон делался так, как с cover.
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
|
| [ UA ] |
|
|
Kosten |
Понедельник, 20 Ноября 2017, 14:33 | Сообщение 6 |
|
|
-SAM-, плиз, подскажи, вчера ушитался на думку, просто на этом вид материалов не мог корректно вывести рейтинг под свой стиль.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 20 Ноября 2017, 14:38 | Сообщение 7 |
|
|
Цитата -SAM- (  ) вот, если не нужно, чтобы фон делался так, как с cover.
И так все выходи, но 100 много, так если только вверх показывать, то ставить.
|
| [ RU ] |
|
|
