Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Фон в css

Фон в CSS (Background)

Очень часто при верстке html страниц требуется задавать фон тому или иному элементу.

В данном уроке мы рассмотрим, каким образом можно задавать фон при помощи CSS.

Должен отметить, что для создания фона в CSS имеется больше возможностей, чем у HTML, да и способы, с помощью которых можно задавать фон в html в принципе устарели.

Материалы по теме:

Для работы с фоном в CSS имеется несколько свойств. Разберем их по порядку.

background-color – задает цвет фона.

При помощи этого свойства, возможно, задавать цвет фона практически для любых элементов, будь то фон страницы, блока или текста. Цвет фона задается следующим образом: background-color:#CCFFCC; где #CCFFCC – это значение цвета. Для того чтобы посмотреть как это работает, создайте html страничку содержащую следующий код:

Фон в CSS body {background-color:#CCFFCC;} p {background-color:#FFFF99;}

Пример текста расположенного на желтом фоне

В данном случае при помощи свойства background-color был задан светло зеленый цвет (#CCFFCC) фону страницы и желтый цвет (#FFFF99) фону текста.

background-image – задает фоновый рисунок.

При помощи данного свойства задавать фоновый рисунок можно практически для любого объекта. Задается следующим образом background-image:url('fon.gif'); где url('fon.gif') это путь к изображению, если ваше изображение лежит в той же папке что и сама html страничка то путь будет выглядеть как и в этом случае, если же изображение, например, лежит в папке images то путь к изображению будет выглядеть так: url('images/fon.gif').

Можете попробовать сохранить это маленькое изображение в скобках ( ), в ту папку, где лежит ваша страничка (для этого кликните по нему правой кнопкой мыши и выберите пункт “Сохранить изображение”), а в саму страничку вставить следующий код:

Фон в CSS body { background-color:#CCFFCC; background-image:url('fon.gif');} p {background-color:#FFFF99;}

Пример текста расположенного на желтом фоне

В результате у вас должен получиться следующий фон:

background-repeat – определяет будет ли повторяться фоновое изображение и если будет то каким образом. У этого свойства существуют следующие значения:

repeat – изображение будет повторяться как по вертикали, так и по горизонтали; repeat-x – изображение будет повторяться только по горизонтали;repeat-y – изображение будет повторяться только по вертикали;

no-repeat – изображение не будет повторяться.

Например создадим фон который будет повторяться только по вертикали, для этого в наш код необходимо добавить следующее background-repeat: repeat-y, полностью он будет выглядеть так:

Фон в CSS body { background-color:#CCFFCC; background-image:url('fon.gif'); background-repeat: repeat-y;} p {background-color:#FFFF99;}

Пример текста расположенного на желтом фоне

В результате наш фон будет отображаться так:

background-attachment – определяет будет ли фон перемещаться вместе с содержимым страницы при скроллинге или нет. Имеет следующие значения:

fixed – фон будет оставаться на месте, а содержимое страницы будет перемещаться;

scroll – фон будет перемещаться вместе с другим содержимым страницы;

Задается это свойство так background-attachment: fixed; весь код:

Фон в CSS body { background-color:#CCFFCC; background-image:url('fon.gif'); background-repeat: repeat-y; background-attachment: fixed;} p {background-color:#FFFF99;}

Пример текста расположенного на желтом фоне

background-position – дает возможность позиционировать фоновое изображение. При помощи данного свойства можно смещать изображение относительно левого верхнего угла элемента.

Оно имеет два значения: первое, на сколько ваше фоновое изображение будет смещаться от левого края и второе на сколько оно будет смещаться от верха. Для того чтобы посмотреть как это работает сохраните изображение, которое Вы видите слева, в ту папку, где находится ваша html страница, а в саму страницу вставьте следующий код:

Фон в CSS body { background-color:#CCFFCC; background-image:url('fon.gif'); background-repeat: repeat-y;} p {background-color:#FFFF99; background-image:url('t.jpg'); background-repeat: no-repeat; background-position: 30px 20px;}

Пример позиционирования изображения

В данном случае мы добавили тегу

изображение, которое не повторяется, и сместили его на 30px вправо и на 20px от верха. Вместо пикселей можно указать проценты. Получилось следующее:

Ну, вот мы и рассмотрели все свойства, используемые в CSS для работы с фоном. Теперь Вы можете применять их на практике при создании своих сайтов.

Материал подготовлен проектом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Опубликовано: 13 Январь 2010

Обновлено: 04 Сентябрь 2013

Фон в CSS

«Фон в CSS » – четвертый урок учебника CSS. Здесь мы обсудим создание, использование и настройку отображения фона в CSS.

CSS предоставляет множество инструментов для работы с фоном, которые позволяют создать действительно уникальный и гармоничный для вашего сайта фон.

Параметры фона в CSS.

Background–attachment – определяет привязку фона на странице. Значение scroll – привязывает фон к полосе прокрутки (при прокрутке фон будет оставаться на месте) и значение fixed – привязывает фон к виртуальной оси координат (при прокрутке фон будет прокручиваться вместе со всей страницей).

Background–color – заполняет элемент цветом. Значение color – задает цвет элемента, а значение transparent – задает прозрачный фон.

.jj { background – color : Red;

}

Background–image – позволяет использовать изображение в качестве фона.

none – фоновое изображение не используется

url – позволяет задать путь к изображению

.nn { background – image : url(img/dog.gif);

}

Background–position – задает начальное положение фонового изображения и может принимать следующие значения:

top – left – верхний левый угол экрана
top – center – верхний центральный
top – right – верхний правый
center left – центральный левый
center center – центр экрана
center right – центральный правый
bottom left – нижний левый
bottom center – нижний центральный
bottom right – нижний правый угол экрана
%(x y) – задание положения в % (верхний левый 0% 0%)
pixels(x y) – задание положения в пикселях (верхний левый 0 0)

.o1 { background – image : url(img/dog.gif); background – position : left; background – repeat : repeat; }
.o2 { background – image : url(img/dog.gif); background – position : right; background – repeat : no – repeat; }
.o3 { background – image : url(img/dog.gif); background – position : bottom; background – repeat : repeat – x; }
.o4 { background – image : url(img/dog.gif); background – position :top; background – repeat : repeat – y; }
.o5 { background – image : url(img/dog.gif); background – position : 40% 60%; background – repeat : repeat – x; }
.o6 { background – image : url(img/dog.gif); background – position : 80px 100px; background – repeat : no – repeat; }

При задании координат посредством ключевых слов, то если задано только одно слово (например top), то второе принимается равным center. При задании координат посредством процентов, если задано только одно значение, то второе принимается равным 50%. При указании положения в процентах или координатно, можно смешивать значения, например (30% 500).

Background – repeat – задает метод тиражирования изображения. Может принимать следующие значения:

repeat – тиражирование в обоих направлениях
no – repeat – изображение выводится только один раз
repeat – x – тиражирование по горизонтали
repeat – y – тиражирование по вертикали.

Пример можете видеть сверху.

CSS позволяет настроить отображение фона на странице и в данном уроке вы в этом убедились. Стоит сказать, что фон в CSS может быть не только у всей страницы, но и у любого ее элемента. В наших примерах фон установлен для ячеек таблицы.

В следующем уроке мы поговорим о работе со списками. Настроим отображение элементов списка, разберемся с упорядоченными и неупорядоченными списками.

Фон в CSS

Фон элемента HTML — это то, что появляется за текстом. Хотя CSS позволяет применять фон к элементу любого типа, он в основном используется для блочных элементов.

Фон применяется только к целевому элементу. Учитывая, что у большинства элементов HTML фон прозрачный, применение фона к будет выглядеть так, словно он применяется ко всем элементам.

background-color

Значение по умолчанию: transparent; наследуется дочерними элементами: нет.

Так как мы уже рассмотрели разные способы определения цвета в CSS, применять цвет фона просто:

body { background-color: #f2eee9; }

Весь элемент будет залит простым фоновым цветом. Имейте в виду, что всегда следует выбирать подходящий цвет текста, чтобы сохранить содержимое читабельным.

background-image

Поскольку простых цветов, как правило, недостаточно, CSS позволяет применять изображения в качестве фона элементов.

Для добавления фонового изображения требуется указать только его URL:

body { background-image: url(images/diagonal-pattern.png); }

Поведение изображения (как оно повторяется, где расположено, какой у него размер) определяется другими свойствами фона. background-image задаёт только, какое изображение использовать.

Имейте в виду, что элемент HTML не принимает во внимание размеры фонового изображения. Даже если изображение больше, чем элемент, к которому оно применяется, элемент не изменит свои размеры, чтобы соответствовать изображению, поскольку изображение является чисто декоративным и оно здесь для поддержки элемента.

Разница между и фоновыми изображениями

Элемент предназначен для изображений, которые являются частью содержимого, в то время как фоновые изображения в CSS чисто декоративные.

Логотип компании, эскизы галереи, изображение продукта и др. — всё это считается содержимым и для него следует использовать элемент .

Диагональный узор, красивый пейзаж, иконка корзины и др. — их можно рассматривать как декоративные, так как они поддерживают содержимое, но не являются его частью. Если бы они исчезли, у веб-страницы по-прежнему сохранится смысл.

Что касается многочисленных двойных выборов, граница между содержимым и стилем размыта. Некоторые визуальные методы легче достичь с помощью фона CSS. Просто спросите себя, важно ли для страницы изображение, которое вы используете. Если да, то применяйте элемент .

Градиенты

CSS также позволяет определять цветовые градиенты в качестве фонового изображения, двух различных видов:

linear-gradient для градиентов в одном направлении, в прямоугольной форме;
radial-gradient для градиентов во всех направлениях, в круговой форме.

Мы расскажем о градиентах позже. Единственное, что нужно сейчас знать — фоновые градиенты рассматриваются в качестве фонового изображения:

body { background-image: linear-gradient(white, grey); }

background-position

По умолчанию фоновое изображение будет повторяться до бесконечности. Вы можете указать исходное положение, выбрав горизонтальное значение х и вертикальное у.

Для каждой координаты вы можете использовать:

значения в пикселях;
проценты, относительно размеров элемента HTML;
ключевые слова, такие как center, left, bottom и др.

body { background-position: right bottom; }

Вы можете смешивать разные единицы координат:

body { background-position: center 20px; }

background-repeat

По умолчанию фоновое изображение будет повторяться до бесконечности. Вы можете выбрать, чтобы оно повторялось только по горизонтали, только по вертикали или не повторялось вообще.

body { background-repeat: repeat-x; } /* Только по горизонтали */ body { background-repeat: repeat-y; } /* Только по вертикали */ body { background-repeat: no-repeat; } /* Фоновое изображение появится только один раз */

Перейти к заданиям

Фон для сайта на css – как его сделать

От автора: фоновый цвет или изображение могут определять первое впечатление от сайта. Правильно подобранный фон, не мешающий восприятию информации на странице, может улучшить поведенческие факторы. Сегодня я хотел бы показать, как задавать фон для сайта в css, а также для любого элемента на веб-странице.

Основной фон сайта

Под основным я понимаю тот, который задается всему сайту в целом, то есть селектору body, либо главному контейнеру, вмещающему в себя все блоки нашего интернет-проекта.

В WordPress вы можете менять этот фон очень легко в визуальном режиме. Для этого достаточно выбрать пункт “Внешний вид”, а в нем уже выбрать “Фон” или “Настроить”. В качестве фона можно выбрать сплошной цвет, а можно загрузить изображение. Но эта статья о том, как все это работает в css, где и прописывается это свойство.

Основные свойства фона в css

Самое первое, что вы можете определить – это сплошной цвет, который будет использоваться в качестве фонового. Это можно определить такой записью:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее селектор{ background-color: цвет; }

В качестве селектора можно выбирать любой нужный элемент, в том числе и всю страницу (body). Теперь надо разобраться с другим вопросом: как записать цвет? Возможно, вы это знаете, но я все же напомню несколько вариантов:

с помощью ключевых слов: white, blue, purple, green.

с помощью hex-кода. Это так называемая шестнадцатеричная запись. Например: #ccc; #333333; #ededed. Ставится решетка и после нее записывается 3 или 6 символов, которые и определяют цвет. Есть много программ, где при выборе цвета вы можете посмотреть его hex-код. Например, фотошоп.

с помощью rgb формата. На этом остановимся, потому что я хотел сказать еще о многом другом в этой статье. Rgb (red, green, blue) где записываются насыщенность этих цветов от 0 до 255. Так можно получить миллионы комбинаций.

Как задать фоновое изображение?

Для этого используется свойство background-image, а в нем задается путь до картинки, которая перед этим должна быть помещена в соответствующую папку. Например:

селектор{ background-image: url(image.jpg); }

background-image: url(image.jpg);

Главное, не забыть поставить слово url, а потом в круглых скобках правильно записать путь. В качестве фона обычно задают jpg или png изображения. В последнем случае наша картинка может быть прозрачной, что дает определенные возможности в оформлении сайта. Если же вам нужно квадратное изображение, то намного правильнее будет использовать его в формате jpg.

Как растянуть фон в css и убрать его повторение

Если вы задаете изображение элементу, который сам по размерам больше ее, то она по умолчанию будет повторяться столько раз, чтобы полностью заполнить его. Это не очень хорошее поведение, в большинстве случаев его нужно убрать, а делается это следующим образом:

background-repeat: no-repeat;

Другой полезный и важный трюк – растягивание фона на всю страницу или на весь блок. Дело в том, что размеры экранов у всех пользователей разные, поэтому на одном разрешении ваша картинка может идеально вписываться в нужный контейнер, а на другом будет видно пустое пространство.

Как перестраховаться и исправить это? Если вы используете так называемые повторяющиеся бесшовные орнаменты, то вам бояться нечего – достаточно не записывать для такой картинки отмену повторения и она сама при необходимости растянется на изменившиеся размеры страницы.

Но что делать, если у вас обычное изображение? Решение есть – background-size, относительно новое свойство, и его значение cover. Я покажу все на примере. Есть блок шириной 300 пикселей и высотой 200 и ему задана фоновая картинка. (красивая)

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Но что произойдет, если мы увеличим размеры блока? Изображение не будет растягиваться, если это дополнительно не задать. Будет так:

Я специально задал серый цвет, чтобы вы видели, сколько появилось пустого места и как это удасно смотрится. Собственно, путей решения есть два:

Дописать свойство background-size: cover. Таким образом, изображение масштабируется так, чтобы полностью заполнить пространство блока. При этом его пропорции не изменяются.

Если размеры контейнера не будут подходить под пропорции картинки, то в него может попасть только часть изображения, потому что свойство не изменяет пропорции. Есть и другой вариант, тоже с использованием размера фона. Нужно записать так:

background-size: 100% 100%;

Эта запись дает команду растягивать картинку на 100% по горизонтали и вертикали. Учтите, что в этом случае пропорции могут нарушаться. Если вам нужно в css растянуть фон по ширине или только по высоте, то можно записать также так:

background-size: contain;

Будет растянуто на 100% страницы или блока, но только по одной стороне (по ширине или высоте, в зависимости от размеров.)

Также все эти манипуляции по растягиванию могут ухудшить внешний вид фото, если величина поменяется очень сильно, но такое редко происходит.

Значение background-size вы также можете задавать в пикселях, когда нужно точно определить его величину. Например, это может быть полезно, если вы определяете размер повторяющегося орнамента или используете повторяющийся линейный градиент.

Трюк с повторением

Если вы используете повторение картинки, то по умолчанию она заполнит все пространство своего контейнера, при этом некоторые ее повторения могут попасть в элемент не полностью.

Чтобы оставить в блоке только полные копии картинки, можно поступить двумя способами:

Установить размер контейнера или самого изображения так, чтобы при повторении она полностью влезала в свой контейнер.

Задать background-repeat: round и теперь изображение будет вести себя так: оно будет повторяться, но при этом копии целиком поместятся в блок. При этом у них могут немного меняться размеры.

Задать background-repeat: space. Это еще одно новое значение из CSS3. Если задано, то размеры фоновой картинки не будут меняться, но между ее копиями могут образовываться пустые пространства. Браузер сам высчитает их так, чтобы в блок поместились только целые картинки.

Итак, мы с вами рассмотрели некоторые свойства, которые позволяют управлять фоном в css, причем некоторые из них появились совсем недавно. Дополнительную информацию вы можете найти в курсе по css для начинающих, я же на этом заканчиваю сегодняшнюю статью. Подписывайтесь на наш блог, если вас интересует сайтостроение.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее