background-size | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Свойства фона


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


background-size | Свойство CSS

Свойство background-size задаёт ширину и высоту фонового изображения




Свойство background-size устанавливает параметры высоты и ширины фонового изображения.Дополнительно следует применять альтернативные свойства для браузеров,для Firefox это -moz-background-size,для Safari или Chrome -webkit-background-size,для Opera -o-background-sizeМогут быть использованы числовые и процентные значения,а так же имя значения,но -webkit-background-size и -o-background-size не поддерживают значений contain и cover.Свойство применимо ко всем элементам,проходит валидацию согласно версии CSS3.




Дополнительные свойства


Свойство
Описание
-moz-background-sizeАльтернативное свойство для Mozila
-webkit-background-sizeАльтернативное свойство для Hrome & Safary
-o-background-sizeАльтернативное свойство для Opera

Дополнительные значения свойства background-size


Значение
Описание
<Число><Число>Устанавливает высоту и ширину фонового изображения. Первое числовое значение определяет ширину, второе значение задает высоту.Если указана одна числовая величина,вторая устанавливается в положение auto
<Процент><Процент>Устанавливает высоту и ширину фонового изображения в процентах от родительского элемента. Первое значение определяет ширину, второе значение задает высоту.Если указана одна процентная величина,вторая устанавливается в положение auto
autoЕсли оба значения заданны как auto auto,это аналогично исходному размеру,если заданно только одно значение auto,а второе заданно как <Число> или <Процент> размер вычисляется автоматически исходя из пропорций картинки.
coverМасштабирует фоновое изображение в сторону уменьшения пропорций,чтобы ширина и высота полностью заняли область фонового изображения
containМасштабирует фоновое изображение в сторону увеличения пропорций,чтобы ширина и высота полностью заняли область фонового изображения
inheritНаследует значение от родителя

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство background-size</title>
<style type="text/css">
<!--
body {
background:url(http://delaisait.ucoz.ru/css/demo/img/css3_background-repeat.jpg);
background-size:100px 100px;
-moz-background-size:100px 100px;
-webkit-background-size:100px 100px;
-o-background-size:100px 100px;
background-repeat:no-repeat;
padding-top:10px;
weight:300px;
height:300px;
}
p {
color: yellow;
font-size: 20px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<p>Заданны 2 числовых значения</p>
</center>
<br>
</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#the-background-size
Категория: Свойства фона | Добавил: IZOTOP (30.03.2012) | Автор: Меренков Михаил E W
Просмотров: 1736 | Теги: css, background-size, свойство, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]