Есть сайт: tes-game.ru На нём стоит очень удобный фон, который только растягивается, если разрешение экрана больше разрешения картинки. Это очень удобно. Как такое сделать у себя на сайте? Что надо сделать для этого?
Надеюсь так будет понятнее ))
Добавлено (09.12.2016, 04:21) --------------------------------------------- Вот тот самый фон: http://tes-game.ru/Cayt/forum/diz/main_body_bg.jpg Его разрешение меньше, чем мой монитор, но при этом его не дублирует, его просто растягивает. Вот как?!
ХОЗЯИН, попробую поставить точку в вашем диалоге) с 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.
Сообщение отредактировал Angerfist - Пятница, 09 Декабря 2016, 09:53
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;">
