Страница 2 из 2«12
Форум про uCoz » Создание сайтов uCoz » Вопросы по uCoz » Статичный фон на странице
Статичный фон на странице
ХОЗЯИН
Дата: Пятница, 09.12.2016, 04:21 | Сообщение # 16
Пользователи
Сообщений:40
Награды: 0


Kosten,
ЦитатаХОЗЯИН ()
Начну с САМОГО НАЧАЛА.

Есть сайт: tes-game.ru
На нём стоит очень удобный фон, который только растягивается, если разрешение экрана больше разрешения картинки. Это очень удобно. Как такое сделать у себя на сайте? Что надо сделать для этого?

Надеюсь так будет понятнее ))

Добавлено (09.12.2016, 04:21)
---------------------------------------------
Вот тот самый фон: http://tes-game.ru/Cayt/forum/diz/main_body_bg.jpg
Его разрешение меньше, чем мой монитор, но при этом его не дублирует, его просто растягивает. Вот как?!

Kosten
Дата: Пятница, 09.12.2016, 04:24 | Сообщение # 17
Администраторы
Сообщений:13730
Награды: 47


ЦитатаХОЗЯИН ()
Его разрешение меньше, чем мой монитор

Но мониторы всякие бывают, у вас 1600 по ширине, а должен 1920, у кого то больше монитор, и там может продублировать, хотя на сервис не показал.
ХОЗЯИН
Дата: Пятница, 09.12.2016, 04:28 | Сообщение # 18
Пользователи
Сообщений:40
Награды: 0


ЦитатаKosten ()
Но мониторы всякие бывают, у вас 1600 по ширине, а должен 1920, у кого то больше монитор, и там может продублировать, хотя на сервис не показал.

У меня монитор именно 1920, а у картинки 1600. И не дублирует, а растягивает.
Kosten
Дата: Пятница, 09.12.2016, 04:32 | Сообщение # 19
Администраторы
Сообщений:13730
Награды: 47


Если стили немного изменить.

Сейчас у вас так стоит:

Код
.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;
}
ХОЗЯИН
Дата: Пятница, 09.12.2016, 04:33 | Сообщение # 20
Пользователи
Сообщений:40
Награды: 0


ЦитатаKosten ()
Сейчас у вас так стоит:

у меня никак не стоит, в том и суть, сайт же не мой )))
Kosten
Дата: Пятница, 09.12.2016, 04:37 | Сообщение # 21
Администраторы
Сообщений:13730
Награды: 47


А в чем прикол, что у вас доступа нет к админ панели?

Есть еще один стиль, который полностью будет отражать фон.

Код
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;
}
ХОЗЯИН
Дата: Пятница, 09.12.2016, 04:39 | Сообщение # 22
Пользователи
Сообщений:40
Награды: 0


Разобрался сам в общем, можно закрывать ))
Kosten
Дата: Пятница, 09.12.2016, 04:47 | Сообщение # 23
Администраторы
Сообщений:13730
Награды: 47


Даже спрашивать не буду, в чем дело, так как нужен в любом случай доступ к админ панели, чтоб что то исправить. 11a

Пусть открыта, может кто то умную мысль напишет.
Angerfist
Дата: Пятница, 09.12.2016, 09:49 | Сообщение # 24
Vip
Сообщений:750
Награды: 20


ХОЗЯИН, попробую поставить точку в вашем диалоге) с 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.12.2016, 09:53
ХОЗЯИН
Дата: Пятница, 09.12.2016, 19:07 | Сообщение # 25
Пользователи
Сообщений:40
Награды: 0


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;">
Alexandrhhh
Дата: Суббота, 10.12.2016, 00:07 | Сообщение # 26
Vip
Сообщений:65
Награды: 6


попробуй юзануть новый css такой width:100vw;
Считывает именно разрешение экрана, и пофиг на уменьшение или увеличение.
Форум про uCoz » Создание сайтов uCoz » Вопросы по uCoz » Статичный фон на странице
Страница 2 из 2«12
Поиск: