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

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

1) Начнём работу над свойством BACKGROUND-REPEAT в CSS, благодаря ему мы можем контролировать повторения нашего изображения по горизонтали и вертикали. Применим различные значения такие как: repeat - повторение по горизонтали и вертикали так же как по умолчанию, repeat-x - повторение по горизонтали, repeat-y - повторение по вертикали, no-repeat - не повторяется. Для этого свойства мы приведём один пример с одним значением, другие применяются так же.

Пример содержание файла style.css для свойства BACKGROUND-REPEAT.


body {                                                                    
background-image: url(images/primer.gif) ;
background-repeat: repeat-x ;                  
}                                                           


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

фоновое изображение в CSS

2) Следующим смотрим свойство BACKGROUND-ATTACHMENT в CSS это очень интересный элемент с ним мы можем сделать, чтоб наше фоновое изображение стояло на месте при прокручивании содержимого нашей страницы или оно будет прокручиваться вместе с содержимым. Посмотрим два применимых значения это scroll - фоновое изображение прокручивается, fixed - фоновое изображение стоит на месте. Теперь ниже приведём оба примера.

Первый пример содержание файла style.css для свойства BACKGROUND-ATTACHMENT и значения fixed.


body {                                                                    
background-image: url(images/primer.gif) ;
background-repeat: no-repeat;                 
background-attachment: fixed;                
}                                                           


Посмотреть итог примера в браузере.

Второй пример содержание файла style.css для свойства BACKGROUND-ATTACHMENT и значения scroll.


body {                                                                    
background-image: url(images/primer.gif) ;
background-repeat: no-repeat;                 
background-attachment: scroll;                
}                                                          


Посмотреть итог примера в браузере.

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

Первый пример содержание файла style.css. Посмотрим значение когда мы указываем в процентах.


body {                                                                    
background-image: url(images/primer.gif) ;
background-repeat: no-repeat;                 
background-position: 75% 50%;               
}                                                           


Смотрите на скриншот здесь как вы заметили сперва мы указали по горизонтали потом по вертикали тоесть то что указано в процентах вначале после background-position оно будет применено по горизонтали. Отсчёт начинается с левого верхнего угла окна браузера.

position CSS в процентах

Второй пример содержание файла style.css. Посмотрим значение когда мы указываем в пикселях.


body {                                                                    
background-image: url(images/primer.gif) ;
background-repeat: no-repeat;                 
background-position: 150px 200px;           
}                                                           


Здесь вы видите что отчёт в пикселях начинается так же как и в первом примере с верхнего левого угла в окне браузера и то что указано в пикселях в начале после background-position начнёт отсчёт по горизонтали.

position CSS в пикселях

Третий пример содержание файла style.css он тоже не менее интересен его мы можем указывать спецальными словами. Давайте посмотрим значения этих слов: center - центр, left - слева, right - справа, top - сверху, bottom - снизу. Перейдём к примеру применения стиля CSS.


body {                                                                    
background-image: url(images/primer.gif) ;
background-repeat: no-repeat;                 
background-position: bottom right;           
}                                                           


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

position CSS в процентах

4) Свойство BACKGROUND в CSS. Это свойство нам нужно чтоб записывать код стиля в коротком виде. Ниже два примера в первом код в обычном виде во втором укороченном пользуйтесь как вам захочется.

Пример содержание файла style.css в обычном виде.


body {                                                                    
background-color: green;                          
background-image : url(images/primer.gif) ;
background-repeat: no-repeat;                  
background-attachment: fixed;                  
background-position: bottom right;            
}                                                           


Пример содержание файла style.css для свойства BACKGROUND.


body {background: green url(image/primer.gif) no-repeat fixed bottom right;}   


Я думаю, здесь ничего особо сложного нет, не надо сразу зазубривать всю таблицу стилей CSS главное понять смысл работы с ним. Для того чтоб легче было освоить пройденные уроки, следует немного самому придумывать различные примеры и смотреть итог в браузере и тогда всё станет на свои места. Жду вас на следующем уроке.

Следующий урок применяем стиль CSS к ссылкам.
Вернуться к первой части по работе с цветом и фоном CSS.



Рейтинг@Mail.ru   Яндекс.Метрика