Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)
Предыдущая тема: Общие вопросы по оформлению (64)
Как с помощью браузера можно определить элемент дизайна. | |
Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS. | |
Ответы на часто задаваемые вопросы. | |
Как задавать вопросы! Разница между стилем и скриптом. ( Советы) | Плюс к названию темы еще и Памятка. |
Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности. |
добрый день!
подскажите, с чем связана проблема с фоном.
ставлю фиксированное позиционирование, но с телефона фиксирование пропадает и получается пустота при прокрутке вниз
ставлю фиксированное позиционирование, но с телефона фиксирование пропадает и получается пустота при прокрутке вниз
Фиксирование не пропадает, просто так масштабируется фон при узком экране, вы ведь не указываете размеры фона, поэтому он по умолчанию берет масштаб..
riviere написал(а):ставлю фиксированное позиционирование, но с телефона фиксирование пропадает и получается пустота при прокрутке вниз
Фиксирование не пропадает, просто так масштабируется фон при узком экране, вы ведь не указываете размеры фона, поэтому он по умолчанию берет масштаб..
то есть нужно поставить фактический размер картинки фона?
то есть нужно поставить фактический размер картинки фона?
А фактический размер и есть у вас сейчас по умолчанию, можно выставить другое с помощью: background-size
riviere написал(а):то есть нужно поставить фактический размер картинки фона?
А фактический размер и есть у вас сейчас по умолчанию, можно выставить другое с помощью: background-size
можете подсказать, что конкретно надо установить, чтобы фон заполнял всю страницу и был фиксированным
я пока не понимаю
Отредактировано riviere (Пн, 24 Июн 2019 15:27:29)
можете подсказать, что конкретно надо установить, чтобы фон заполнял всю страницу и было фиксированным
я пока не понимаю
Вот так можно: background-size: 100% 100%; Но будет искажения.. Можете попробовать: background-size: contain; - вроде он в вашем случае подходит нормально..
Можете попробовать: background-size: contain; - вроде он в вашем случае подходит нормально..
поставила contain, но с телефона все равно пропасть
поставила contain, но с телефона все равно пропасть
А сделайте скриншот самого низа как у вас отображается.. Вам именно в мобильном варианте надо? Для ПК всё устраивает?
riviere написал(а):поставила contain, но с телефона все равно пропасть
А сделайте скриншот самого низа как у вас отображается.. Вам именно в мобильном варианте надо? Для ПК всё устраивает?
riviere, попробуйте поставить этот код:
@media screen and (max-width: 768px) {
body {background-size: 100% 100% !important;}
}Ниже этого кода:
/* BODY */
body {
background-image: url(https://i.imgur.com/w8ryQFK.jpg), url(https://i.imgur.com/wk4sPLJ.jpg);
background-size: contain;
background-attachment: fixed;
background-position: top left, top right;
background-repeat: no-repeat, repeat-y;
background-color: #9a9c93;}
Или в НТМЛ верх..
riviere, а зачем:
background-image: url(https://i.imgur.com/w8ryQFK.jpg), url(https://i.imgur.com/wk4sPLJ.jpg);
Не проще через фотошоп сделать нужный вам фон и тогда не будет никаких скачков?
Отредактировано kolobdur74 (Пн, 24 Июн 2019 16:16:55)
Не проще через фотошоп сделать нужный вам фон и тогда не будет никаких скачков?
сделала один большой фон, поставила тот код, что вы прописали, все равно с телефона та же история
и еще момент, при положении contain изображение немного уменьшается.
сделала один большой фон, поставила тот код, что вы прописали, все равно с телефона та же история
и еще момент, при положении contain изображение немного уменьшается.
В данном случае лучше использовать: background-size: cover; Для мобильного варианта:
@media screen and (max-width: 768px) {
body {background-size: 100% 100% !important;}
}
Вы же очищаете кеш на мобильном браузере?
riviere написал(а):сделала один большой фон, поставила тот код, что вы прописали, все равно с телефона та же история
и еще момент, при положении contain изображение немного уменьшается.В данном случае лучше использовать: background-size: cover; Для мобильного варианта:
kolobdur74 написал(а):@media screen and (max-width: 768px) {
body {background-size: 100% 100% !important;}
}Вы же очищаете кеш на мобильном браузере?
кэш почистила, все осталось прежним. и при значении cover изображение все еще меньше оригинального
кэш почистила, все осталось прежним. и при значении cover изображение все еще меньше оригинального
вру, фон на телефоне заполняется, но он расширяется вправо, поэтому правой его однотонной части не видно
изз-за этого вот такой огрызок
riviere, попробуйте вот эту картинку:
Для мобильного попробуйте этот вариант:
@media screen and (max-width: 540px) {
body {background-size: 100% 100%;}
}попробуйте вот эту картинку:
Для мобильного попробуйте этот вариант:
все поставила.
на всякий случай, вот так стоит
/* BODY */
body {background-image: url(https://i.imgur.com/ppejM2E.png);
background-size: cover;
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
background-color: #9a9c93;}@media screen and (max-width: 540px) {
body {background-size: 100% 100%;}
}
и все еще без изменений
в итоге поставила на фон два изображения все-таки, bakground-size убрала, но @media оставила, и кажется все встало
kolobdur74
спасибо вам огромное за помощь с этим чудесным гемором х)
в итоге поставила на фон два изображения все-таки, bakground-size убрала, но @media оставила, и кажется все встало
А @media не работает, не понял почему.. Попробуйте его убрать и глянуть..
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)