|
Статичный фон на странице
|
|
| ХОЗЯИН | Пятница, 09 Декабря 2016, 04:21 | Сообщение 16 |
| Kosten, ЦитатаХОЗЯИН (  ) Начну с САМОГО НАЧАЛА.
Есть сайт: tes-game.ru
На нём стоит очень удобный фон, который только растягивается, если разрешение экрана больше разрешения картинки. Это очень удобно. Как такое сделать у себя на сайте? Что надо сделать для этого?
Надеюсь так будет понятнее ))Добавлено (09.12.2016, 04:21)
---------------------------------------------
Вот тот самый фон: http://tes-game.ru/Cayt/forum/diz/main_body_bg.jpg
Его разрешение меньше, чем мой монитор, но при этом его не дублирует, его просто растягивает. Вот как?!
| | [ FI ] |
| |
| Kosten | Пятница, 09 Декабря 2016, 04:24 | Сообщение 17 |
| ЦитатаХОЗЯИН ( ) Его разрешение меньше, чем мой монитор
Но мониторы всякие бывают, у вас 1600 по ширине, а должен 1920, у кого то больше монитор, и там может продублировать, хотя на сервис не показал.
| | [ RU ] |
| |
| ХОЗЯИН | Пятница, 09 Декабря 2016, 04:28 | Сообщение 18 |
|
| ЦитатаKosten ( ) Но мониторы всякие бывают, у вас 1600 по ширине, а должен 1920, у кого то больше монитор, и там может продублировать, хотя на сервис не показал.
У меня монитор именно 1920, а у картинки 1600. И не дублирует, а растягивает.
| | [ FI ] |
| |
| Kosten | Пятница, 09 Декабря 2016, 04:32 | Сообщение 19 |
|
| Если стили немного изменить.
Сейчас у вас так стоит:
Код .main-forum {background: url(http://tes-game.ru/Cayt/forum/diz/main_body_bg.jpg) no-repeat center center fixed;webkit-background-size: cover;
Попробуйте поменять на этот, но до этого сохраните в Резервное копирование (backup) чтоб если что на свое место поставить.
Код .main-forum {
height: auto !important; height: 100%; min-height: 100%; font-family:Tahoma,Geneva,sans-serif; font-size: 13px; color: #CCCCCC; background-image: url(http://tes-game.ru/Cayt/forum/diz/main_body_bg.jpg); background-color: #000; background-position: top center; background-repeat: no-repeat;
} | | [ RU ] |
| |
| ХОЗЯИН | Пятница, 09 Декабря 2016, 04:33 | Сообщение 20 |
|
| ЦитатаKosten ( ) Сейчас у вас так стоит:
у меня никак не стоит, в том и суть, сайт же не мой )))
| | [ FI ] |
| |
| Kosten | Пятница, 09 Декабря 2016, 04:37 | Сообщение 21 |
|
| А в чем прикол, что у вас доступа нет к админ панели?
Есть еще один стиль, который полностью будет отражать фон.
Код body {
height: auto !important; height: 100%; min-height: 100%; font-family: Arial, Tahoma, sans-serif; font-size: 12px; color: #363636; background-image: url(../images/body.jpg); background-color: #000; background-position: top center; background-repeat: no-repeat;
} | | [ RU ] |
| |
| ХОЗЯИН | Пятница, 09 Декабря 2016, 04:39 | Сообщение 22 |
|
| Разобрался сам в общем, можно закрывать ))
| | [ FI ] |
| |
| Kosten | Пятница, 09 Декабря 2016, 04:47 | Сообщение 23 |
|
| Даже спрашивать не буду, в чем дело, так как нужен в любом случай доступ к админ панели, чтоб что то исправить. 
Пусть открыта, может кто то умную мысль напишет.
| | [ RU ] |
| |
| Angerfist | Пятница, 09 Декабря 2016, 09:49 | Сообщение 24 |
| ХОЗЯИН, попробую поставить точку в вашем диалоге) с Kostenoм.
Статичный фон можно зафиксировать таким образом, в таблице стилей привожу пример:
Код
body {background:url(/images/backgrounds/main.jpg); background-position: center center; background-repeat: no-repeat; background-attachment:fixed;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover;}
Ну и вкратце, указали путь к изображению,
- далее у свойства background-position два значения, положение по горизонтали и вертикали (можно задавать в процентах,center center = 50% 50% (по центру)), то есть center center, выравниваем фон по центру,
- далее background-repeat, пишем no-repeat чтобы изображение фона не повторялось,
- далее background-attachment, пишем fixed, фиксируем фоновое изображение, то есть при прокрутке контента сайта оно остаётся неподвижным,
- далее параметр background-size указан уже с браузерными префиксами -webkit- -moz- -o- -ms- (для чего я думаю все знаете), отвлёкся, ну так вот, background-size со значением cover: масштабирует фоновое изображение с сохранением пропорций так, чтобы его ширина или высота равнялась основной общей ширине или высоте сайта.
Если добить мобильную адаптацию, то лучше в медиа запросах добавить для смартфонов такую же фоновую картинку, но с уменьшенными размерами, либо вообще вместо background-image оставить background-color.
Можно и по другому, это один из примеров, для этого курите мануалы по html и css.
No regrets
Сообщение отредактировал
Angerfist - Пятница, 09 Декабря 2016, 09:53 | | [ RU ] |
| |
| ХОЗЯИН | Пятница, 09 Декабря 2016, 19:07 | Сообщение 25 |
|
| Angerfist, я тогда поставил код, который ниже, и всё.. всё работает, всё хорошо ))
Код <body style="background: url(/rurip/tes-bg.jpg) no-repeat center center fixed;webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> | | [ FI ] |
| |
| Alexandrhhh | Суббота, 10 Декабря 2016, 00:07 | Сообщение 26 |
| попробуй юзануть новый css такой width:100vw;
Считывает именно разрешение экрана, и пофиг на уменьшение или увеличение.
| | [ RU ] |
| |
