Устанавливаем фон на CSS
Из этого урока вы узнаете о css свойстве background, при помощи которого можно задавать на своем сайте определенный фон для элемента страницы. Для того чтобы использовать данное свойство, для начала, необходимо написать некоторый html код, с которого мы и начнем:
<html>
<head>
<title>Структура сайта</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<span>А тут другой фон</span>
<p>Создадим фон для этого элемента</p>
<div>Блок с фоновой картинкой</div>
</body>
</html>
Мы создали три элемента на странице, к которым и будем применять css свойство background. И пишем код, который и будет устанавливать фон для наших элементов.
span {
background: #0ff;
}
p {
background: #f00;
}
div {
background: url(../images/background.jpg) no-repeat;
}
Теперь, как мы видим, после выполнения css кода, получилось все гораздо красивее.
В теге span мы получили бирюзовый цвет фона, причем он заканчивается он ровно тогда, когда и заканчивается сам текст, написанный в данном теге. Все это связано с тем, что тег span имеет не блочную структуру, а строчную. Более понятным языком, данный тег не растягивается на всю ширину окна браузера и не ведет себя изначально как блочный элемент.
В теге p мы получили красный цвет фона, который тянется на всю ширину окна браузера, именно поэтому я взял тег span и тег p, чтобы показать вам отличие. Ведь изначально тег абзаца ведет себя как блочный элемент, поэтому он и растягивается на всю ширину окна браузера.
Последний пример это тег div, который является блоком, но почему-то картинка не растягивается на всю ширину экрана, а является довольно миниатюрной. Ведь мы указали помимо свойства фона, еще и фиксированную ширину для нашего блока div, которая равна ширине самой картинки, и высоту равную ширине картинки, поэтому наш блок стал равным пропорциям этого изображения.
Мы немного отошли от темы, поэтому сейчас я объясню, как задается свойство background. Прописав данное свойство, после двоеточия вы указываете цвет, в данном случае мы указывали в шестнадцатеричной системе, вы также можете указывать и словами(green, blue, yellow и т.д.) Все, вы указали нужный цвет и если вы все правильно сделали, все должно появиться на ваших экранах. А теперь как же устанавливать картинку. После указания свойства background, вы пишите url, которое означает путь, где находится данное изображение, и в круглых скобках указываете ваш путь. После того как скобки закрыты, вы можете указать, хотите ли вы чтобы ваше изображение повторялось по оси X, оси Y, либо не повторялось. В нашем случае мы указали, чтобы изображение не повторялось no-repeat, аналогично для оси X (repeat-x), оси Y (repeat-y). Это не все параметры, которые можно указывать, но если Вам интересно, что еще можно указать для данного свойства, обратитесь к справочнику CSS, где будут указаны все характеристики, которые вы сможете использовать в своей работе. Спасибо!
