Как поставить картинку на фон css

Урок 28. Неподвижный фон, прописанный с помощью стилей CSS. Размножающаяся и не размножающаяся картинка фона

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

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

Есть несколько способов установить то, что нам нужно.

Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):

В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:

В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).

Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в Уроке 8 — и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.

Итак, вот какие параметры мы задаём при помощи стилей:

— background-image: url(адрес картинки фона); — прописываем адрес нашей фоновой картинки 1280 на 1024 px.

— background-attachment: fixed; — задаём фону указание оставаться фиксированным, то есть, неподвижным.

— background-repeat: no-repeat; — задаём фону указание не размножаться.

— background-position: top; — задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.

Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:

Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: ПРИМЕР (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).

Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:

При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:

Здесь мы задали только параметр: background-attachment: fixed; — то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке «не размножаться» — она должна у нас размножиться на весь экран.

Получится вот что: ПРИМЕР

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

— background:#e0ddd8 url(адрес фоновой картинки) — цвет под фоновой картинкой — бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).

— no-repeat — картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров — Робертом Дювалем).

— fixed — фон зафиксирован, то есть неподвижный.

— left top — выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта — слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете:

Как сделать картинку фоном

Здравствуйте! В прошлом уроке мы с Вами разбирались с размерами элементов, а в это мы поговорим о фоне элемента. Фон элемента описывается в CSS свойством background. Фактически это свойство представляет сокращение набора следующих свойств CSS:

background-color: устанавливает цвет фона

background-color: #ff0507;

background-image: url(dubi.png);

Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png. Также можно использовать абсолютные адреса URL, например:

background-image: url(http://localhost.com/someimage.png);

Либо можно использовать относительные адреса — относительно html-документа или корневого каталога сайта:

background-image: url(../images/someimage.png); /* путь относительно html-документа */

     div < width: 250px; height: 200px; margin: 10px; >.colored < background-color: #ff0507; >.imaged 
Первый блок
 
Второй блок
   

Повторение изображения

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

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

• repeat-x: повторение по горизонтали
• repeat-y: повторение по вертикали
• repeat: повторение по обеим сторонам (действие по умолчанию)
• space: изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов
• round: изображение должным образом масштабируется для полного заполнения всего пространства
• no-repeat: изображение не повторяется

Читайте также Стилизация шрифтов

Размер изображения

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

• contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
• cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
• auto: значение по умолчанию, изображение отображается в полный размер

Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:

background-size: 100% 100%;

Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:

background-size: 200px 150px; /* ширина 200 пикселей, высота 150 пикселей */

Можно задать точное значение для одного измерения — ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:

background-size: 200px auto; /* ширина 200 пикселей, автоматическая высота */

     div < width: 200px; height: 150px; margin: 10px; border: black solid 1px; background-image: url(dubi.png); >.imaged1 < background-size: cover; >.imaged2  

Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то по умолчанию изображение будет повторяться для заполнения всей поверхности.

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

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

background-position: отступ_по_оси_X отступ_по_оси_Y;

       
Туман начинал расходиться, и неопределенно, верстах в двух расстояния, виднелись уже неприятельские войска на противоположных возвышенностях.
   

Читайте также Стили для списков

Кроме того, данное свойство может принимать одно из следующих значений:

• top: выравнивание по верхнему краю элемента
• left: выравнивание по левому краю элемента
• right: выравнивание по правому краю элемента
• bottom: выравнивание по нижнему краю элемента
• center: изображение располагается по центру элемента

background-position: top right;

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

background-attachment

Свойство background-attachment управляет, как фоновое изображение будет прикреплено к элементу. Это свойство может принимать следующие значения:

• fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента
• local: по мере прокрутки внутри элемента фон изменяется
• scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов

background-origin

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

• border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
• padding-box: фон устанавливается с учетом внутренних отступов
• content-box: фон устанавливается по содержимому элемента

Используем все три значения:

     div < width: 200px; height: 200px; margin: 10px; display: inline-block; /* располагаем блоки в ряд */ color: #eee; padding:15px; border: 15px solid rgba(23,23,23,0.2); background-image: url(img/phone-touch.jpg); background-size: cover; background-repeat: no-repeat; >.borderBox .paddingBox .contentBox  
Вся власть - котикам!
 
Вся власть - котикам!
 
Вся власть - котикам!
   

background-clip

Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:

• border-box: изображение обрезается по границам элемента
• padding-box: из изображения исключается так часть, которая находится под границами элемента
• content-box: изображение обрезается по содержимому с учетом внутренних отступов

Читайте также Границы CSS

Например, если к предыдущей разметке мы применим следующие стили:

div < width: 200px; height: 200px; margin: 10px; display: inline-block; color: #eee; padding:15px; border: 15px solid rgba(23,23,23,0.1); background-image: url(cats.jpg); background-size: cover; background-repeat: no-repeat; >.borderBox .paddingBox .contentBox

Тогда мы получим следующий результат:

Свойство background

Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:

background:

Например, если у нас есть следующий набор свойств:

background-image: url(cats.jpg); background-color: #eee; background-repeat: no-repeat; background-clip: border-box; background-origin: border-box; background-attachment: local;

То мы их можем сократить следующим образом:

background: #eee no-repeat border-box local url(cats.jpg);

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.