Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 3:

Параметры CSS для фона

< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Аннотация: На примерах подробно рассматривается синтаксис, методы и свойства задания фона.

Параметры CSS для фона определяют фоновые эффекты элемента.

Примеры

  1. Данный пример показывает, как задать фоновый цвет элемента.
    <html>
    <head>
    
    <style type="text/css">
    ul {background-color: rgb(200,10,200)}
    ol {background-color: #00FFFF}
    li {background-color: transparent}
    p {background-color: blue}
    </style>
    </head>
    
    <body>
    
    <ul>
    <li>this is ul</li>
    </ul>
    <ol>
    <li>this is ol</li>
    </ol>
    <p>This is a paragraph</p>
    
    
    </body>
    </html>
  2. Данный пример показывает, как задать в качестве фона изображение.
    <html>
    <head>
    
    <style type="text/css">
    body 
    {
    background-image:
    url(http://www.intuit.ru/departament/picture.jpg)
    }
    </style>
    
    </head>
    
    <body>
    В документе в качестве фона использовано изображение
    </body>
    
    </html>
  3. Данный пример показывает, как использовать повторяющееся фоновое изображение.
    <html>
    <head>
    
    <style type="text/css">
    body
    { 
    background-image: 
    url(http://www.intuit.ru/departament/picture.jpg);
    background-repeat: repeat
    }
    </style>
    
    </head>
    
    <body>
    В документе в качестве фона использовано повторяющееся изображение
    </body>
    </html>
  4. Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение.
    <html>
    <head>
    
    <style type="text/css">
    body
    { 
    background-image: 
    url(http://www.intuit.ru/departament/picture.jpg);
    background-repeat: repeat-y
    }
    </style>
    
    </head>
    
    <body>
    В документе в качестве фона использовано повторяющееся изображение, 
    которое размножается только вертикально
    </body>
    </html>
  5. Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
    <html>
    <head>
    
    <style type="text/css">
    body
    { 
    background-image: 
    url(http://www.intuit.ru/departament/picture.jpg);
    background-repeat: repeat-x
    }
    </style>
    
    </head>
    
    <body>
    В документе в качестве фона использовано повторяющееся изображение, 
    которое размножается только горизонтально.
    </body>
    </html>
  6. Данный пример показывает, как разместить на странице фоновое изображение.
    <html>
    <head>
    <style type="text/css">
    body
    { 
    background-image: 
    url(http://www.intuit.ru/departament/picture.jpg);
    background-repeat: 
     repeat;
    background-position: 
     bottom; 
    }
    </style>
    </head>
    
    <body>
    </body>
    </html>
  7. Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
    <html>
    <head>
    <style type="text/css">
    body 
    {
    background-image: 
    url(http://www.intuit.ru/departament/picture.jpg);
    background-repeat: 
    no-repeat;
    background-attachment: 
    fixed
    }
    </style>
    </head>
    
    <body>
    Определено фиксированное фоновое изображение<br>
    Определено фиксированное фоновое изображение<br>
    Определено фиксированное фоновое изображение<br>
    </body>
    
    </html>
  8. Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.
    <html>
    <head>
    <style type="text/css">
    body 
    {
    background-image: 
    url(http://www.intuit.ru/departament/picture.jpg);
    background-repeat: 
    no-repeat;
    background-attachment: 
    scroll
    }
    </style>
    </head>
    
    <body>
    Определено прокручивающееся фоновое изображение<br>
    Определено прокручивающееся фоновое изображение<br>
    Определено прокручивающееся фоновое изображение<br>
    </body>
    
    </html>
  9. Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    body
    { 
    background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center; 
    }
    </style>
    </head>
    
    <body>
    Это документ, для которого свойства фона заданы в одном объявлении<br>
    Это документ, для которого свойства фона заданы в одном объявлении<br>
    Это документ, для которого свойства фона заданы в одном объявлении<br>
    </body>
    
    </html>

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

< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия