Переключать пункты меню

Фоновое изображение css

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

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

Свойство окружающей картинке задает элемент background-repeat: после двоеточия ставим параметр который может принимать одно из четырех значений : no-repeat, repeat-х, repeat-у или repeat.

Как вы уже заметили, задний план может быть четырех видов:
 

1. Свойство background-repeat: no-repeat; это будет одна большая картинка, которая расположена на заднем плане и занимает всю поверхность рабочего фона монитора, и что не маловажно не повторяется (repeat по английски повторять, повторяться). Важно в фотошопе сделать картинку более прозрачной. Или задать этот параметр в файле style.css. Для фонового изображения код css следующий : Например если мы задаем картинку для тега body зададим класс class=”wrapper” в файле стилей пропишем – body.wrapper { background-image: url(../img/fon.jpg); background-repeat:no-repeat; width: 100%; height: 100%; margin: 0; padding: 0; } если хотите сделать картинку более прозрачной допишите стиль opacity:0.5;

2. Свойство background-repeat: repeat-у; Одна небольшая но широкая картинка можно на всю ширину экрана. Но которая будет повторяться по вертикали. Чтобы фоновое изображение выглядело именно так, то в файле стилей укажем следующее body.wrapper { background-image: url(../img/fon.jpg); background-repeat: repeat - у; width: 100%; height: 10рх; margin: 0; padding: 0; opacity:0.5; }

3. Свойство background-repeat: repeat-х; При таких параметрах фоновая картинка будет повторяться по оси х, то есть по горизонтали. Код для файла стилей следующий : body.wrapper { background-image: url(../img/fon.jpg); background-repeat: repeat - х; width: 10рх; height: 100%; margin: 0; padding: 0; opacity:0.5; }

4. Свойство background-repeat: repeat; При таких параметрах обычно используют небольшую картинку размером 50Х50, 100Х100, которая будет повторяться по оси х и по оси у. Файл стилей будет таким : body.wrapper { background-image: url(../img/fon.jpg); background-repeat: repeat ; width: 100рх; height: 100рх; margin: 0; padding: 0; opacity:0.5; }
 

Добавить комментарий


Коллекция скриптов и модулей   © 2017