Центрируем background
8613
8 из 10
Проголосовало: 8
Проголосовало: 8
На самом деле вещь очень нужная, и чтоб вы мне поверили, я проведу маленькую презентацию.
Здесь, задний фон фиксирован, и браузер отображает мне изображение от левого верхнего угла. Изображение размером 1920х1080 не влазит полностью на экран 1366x768 (я с ноутбука) и выглядит не совсем приятно.
те же параметры изображения только уже без контента.
Как мы видим, задний фон сайта поменял свое положение, и теперь не показывает нам свое изображение не от левого верхнего угла. Он центрировал его и теперь даже экраны с маленьким разрешением, могут правильно отобразить изображение.
те же параметры изображения только уже без контента.
И так, как же мы добились такого эффекта?) Все очень просто
background-color: transparent;
background-repeat: repeat, no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
Конечно на примере этого изображения вряд ли что-то видно толком. Попробуйте с другими не однотонными картинками и вы удивитесь результату. (если конечно Вовчик одобрит)
Здесь, задний фон фиксирован, и браузер отображает мне изображение от левого верхнего угла. Изображение размером 1920х1080 не влазит полностью на экран 1366x768 (я с ноутбука) и выглядит не совсем приятно.
те же параметры изображения только уже без контента.
Как мы видим, задний фон сайта поменял свое положение, и теперь не показывает нам свое изображение не от левого верхнего угла. Он центрировал его и теперь даже экраны с маленьким разрешением, могут правильно отобразить изображение.
те же параметры изображения только уже без контента.
И так, как же мы добились такого эффекта?) Все очень просто
Код
background-color: transparent;
background-repeat: repeat, no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
Конечно на примере этого изображения вряд ли что-то видно толком. Попробуйте с другими не однотонными картинками и вы удивитесь результату. (если конечно Вовчик одобрит)
Автор публикации: Загрузка
Загрузка
- Всего комментариев: 11
0
|
Как и куда его устанавливать прошу ответить по почте comp_pro@bk.ru
|
0
|
Уау, по настоящему важный материал, спасибо автору
|
0
|
про background-size я знаю, удобная вещь!!
Цитата Вау, да ты гений! Сам придумал? подкол не к месту, ибо ооооочень многие это не знают |
0
|
Согласен что много кто этого не знает, но ставить источник webo4ka.ru это просто что-то
|
0
|
Пфф а что мне ставить еще? Если я ее сам подготовил и выложил на единственном сайте webo4ka. Не свой же демо сайт.
|
|
0
|
Это блин CSS! Хотите сказать, что вот это вот он сам сделал, да? Вот сидел-сидел, а тут "Эврика!" придумал новые CSS-теги, написал их, и поставил блин источник. Гениально.
|
|
0
|
Ололо. Статья написана мной, а не теги. Ты что, читать не умеешь.
|
|
0
|
Скажи мне, ты дурак? :C
"Скрипты и модификации для Ucoz" тебе ни о чем не говорит? Для статей есть форум. А здесь я не вижу никакой модификации, тем более скрипта. |
|
0
|
Прямо тут постоянно скрипты валятся и валятся и статьи есть обычные тем более это нужная статья.
|
|
0
|
Вау, да ты гений! Сам придумал?
|
|
-1
|
 :D
|
- Оставить комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
 |  |  | |  |  |
 | |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2026 г.
- Design by Вовчик Администратор:)