Как сделать фон для сайта html css


Опубликовано: 26.10.2017, 14:39/ Просмотров: 586

сделать Фон для сайта задаётся свойством background [w3.org].

background-color

По умолчанию background имеет значение transparent. Частичную или полную прозрачность можно достичь с помощью функции RGBA. Рассмотрим зелёный цвет, который можно записать следующим образом.
▼ green #008000 rgb rgba div { background: transparentgreen#008000rgb(0,128,0)rgba(0,128,0,.7); height: 25em; }

background-image

Помимо цвета используется и картинка. Если она меньше требуемой области, то изображение будет повторяться.
▼ url l-gradient r-gradient div { background: green noneurl(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg); height: 25em; } Подробнее про линейный градиент Подробнее про радиальный градиент

background-repeat

Задаёт повторение рисунка по горизонтали, по вертикали или показывает картинку в одном экземпляре. space повторяет изображение без обрезания и изменения размера, round изменяет фото так, чтобы оно уместилось в контейнер целиком. space, round и no-repeat можно совмещать. Последние два значения не поддерживаются в Mozilla Firefox, Chrome и Safari.
▼ no-repeat repeat-x repeat-y space round space×no-repeat div { background: green url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg) repeatno-repeatrepeat-xrepeat-yspaceroundspace no-repeat; height: 25em; } Обязательно нужно указывать пробел после скобок, например, такая надпись не будет работать в IE. background: #FFF url(адрес_изо)no-repeat;

background-position

Для позиционирования элемента, где первое значение (проценты, px и др.) определяет расположение по горизонтали, второе - вертикали.
▼ 0% 50% 50% 50% 100% 0% 100% 100% div { background: green url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg) no-repeat 0% 0%0% 50%50% 50%100% 0%100% 100%; height: 25em; }

background-attachment

По умолчанию фон перемещается с прокруткой окна браузера (scroll). Можно зафиксировать его (fixed). Или позволить перемещаться с прокруткой содержимого блока (local).
▼ fixed local div { background: #fff5d7 url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) no-repeat scrollfixed; height: 25em; overflow-y: scroll; background-attachment: local; }

background-clip

Определяет вид фоновой картинки под границами.
▼ padding-box content-box div { background: #fff5d7 url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) no-repeat; background-clip: border-box; background-clip: padding-box; background-clip: content-box; height: 25em; padding: 20px; border: 10px dashed #ABC; }

background-origin

Фоновое изображение позиционируется относительно края элемента.
▼ border-box content-box div { background: #fff5d7 url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) no-repeat; background-origin: padding-box; background-origin: border-box; background-origin: content-box; height: 25em; padding: 20px; border: 10px dashed #ABC; }

background-size

Задаёт размер фоновой картинки элемента. В данном случае textarea, а значит, потянув за точки, составляющие треугольник, можно изменить его габариты. auto, contain и cover сохраняют соотношения высоты и ширины изображения, проценты изменяют площадь относительно занимаемого блока.
▼ по ширине по высоте по меньшей стороне по большей стороне всё пространство в единицах textarea { display: block; background: #fff5d7 url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) no-repeat; background-size: 100% auto; background-size: auto 100%; background-size: contain; background-size: cover; background-size: 100% 100%; background-size: 200px 154px; background-size: auto; width: 100%; height: 35em; }

background-blend-mode

Управляет режимами смешивания слоев фона [w3.org]. Для каждого изображения или градиента можно прописать свой режим.
изо градиент

normal

multiply

screen

overlay

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

div { width: 189px; height: 220px; background: #fff5d7 url(http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s220/zayats.jpg); background-blend-mode: normal; transition: 1s linear; } div:hover { background-color: rgba(0,0,0,0); }

Написание

Это равнозначное написание кода:

background-color: #7da716; background-image: url(http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif); background-repeat: no-repeat; background-position: 50% 50%; background: #7da716 url(http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif) no-repeat 50% 50%;

Через запятую можно указывать значения для нескольких фоновых изображений

background-color: #7da716; background-image: url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg), url(http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s00/Logo-Blogger.png), url(http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif); background-repeat: no-repeat; background-position: 0% 0%, 100% 100%, 50% 50%; background: url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg) no-repeat, url(http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s00/Logo-Blogger.png) 100% 100% no-repeat, url(http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif) 50% 50% no-repeat #7da716;



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Ставим картинку в качестве фона сайта с помощью HTML Статус наша сборная

Как сделать фон для сайта html css Как сделать фон для сайта html css Как сделать фон для сайта html css Как сделать фон для сайта html css Как сделать фон для сайта html css Как сделать фон для сайта html css

Похожие новости