Фон для сайта html (CSS свойство background)

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

background-color

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

background-image

Помимо цвета используется и картинка. Если она меньше требуемой области, то изображение будет повторяться.
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.
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 и др.) определяет расположение по горизонтали, второе - вертикали.
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).
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

Определяет вид фоновой картинки под границами.
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

Фоновое изображение позиционируется относительно края элемента.
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;
в f t
наверх ↑

44 комментария:

Виталий Зданевич
Спасибо большое, Наталья, но я ничего не понимаю…

Какой же мне код написать в блок Блоггера, чтобы Клац — белый фон! Клац снова — обратно черный!
NMitra
В код

<body class='loading'>

добавляем

<body class='loading' id="fon">

В гаджет HTML/JavaScript

<input onclick="getElementById('fon').style.backgroundColor='#fff';" type="button" value="белый цвет" />
NMitra
Или ещё интересней. id для body также необходим. А в гаджет добавляем

<style type='text/css'>
.elementoVisible {background: #fff;}
.linkContraido {
     cursor: pointer;
     background: #FFF;
     
}
.linkExpandido {
     cursor: pointer;
     background: #000;
  }
</style>

<script type='text/javascript'>
     function desplegarContraer(cual,desde) {
          var elElemento=document.getElementById(cual);
          if(elElemento.className == 'elementoVisible') {
               elElemento.className = 'body';
               desde.className = 'linkContraido';
          } else {
               elElemento.className = 'elementoVisible';
               desde.className = 'linkExpandido';
          }
}
</script>
<div onclick="desplegarContraer('fon',this);" class="linkContraido">TEXTO</div>
NMitra
Образец - http://prilozhenie5.blogspot.com/ (несколько примитивный, но даёт понять суть)

фон тёмный - кнопка белая

щелчок

фон белый - кнопка тёмная
Виталий Зданевич
Так этот код меняет только фон вне колбасы основной части блога (как в примере)? А чтобы весь фон менялся, колбаса и основной?
NMitra
Вот этот участок должен выглядеть как:

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#292929"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
   </Group>

Перед ]]></b:skin> внести

.post-outer { background-color: transparent; }
Виталий Зданевич
Столько кода — я совершенно ничего не понимаю… Это разные варианты или исправления?..

Что же писать в темплейт и что-же — в гаджет?.. Мол:

В темплейте между X и Y пишем:

xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx

В код нового гаджета пишем:

xxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx
NMitra
Комментарий 6 - изменения в "Дизайн"-"Изменить HTML".

Комментарий 2 - там же добавляем id="fon" в body.

Комментарий 3 - вносим код в новый гаджет HTML/JavaScript.
Виталий Зданевич
Там же это перед ]]> ?
Виталий Зданевич
съелся тег

] ] > < / b : s k i n >
NMitra
Там же - это в "Дизайн"-"Изменить HTML".
NMitra
Для того, чтобы и менялся текст:

<style type='text/css'>
.elementoVisible {background: #fff;}
.linkContraido {
     cursor: pointer;
     background: #FFF;padding-top: 10px;
     display: block; width: 170px; height: 20px;
width: 170px;
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 15px/10px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #000;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
.linkExpandido {
     cursor: pointer;padding-top: 10px;
     background: #000;
 display: block; width: 170px; height: 20px;
width: 170px;
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 15px/10px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #fff;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out; }
.elementoVisibleheader {background: #000;}</style>

<script type='text/javascript'>
     function desplegarContraer(cual,desde) {
          var elElemento=document.getElementById(cual);
          if(elElemento.className == 'elementoVisible') {
               elElemento.className = 'body';
               desde.className = 'linkContraido';
               desde.innerHTML = 'белый';
                   } else {
               elElemento.className = 'elementoVisible';
               desde.className = 'linkExpandido';
               desde.innerHTML = 'чёрный';
                      }
}

</script>
<div onclick="desplegarContraer('fon',this);" class="linkContraido">Сменить фон</div>
Наталка Михайлівна Зуб
Скажите пожалуйста, как поменять фон вкладок в меню. У меня меню белое, а нужно например такое #4682B4(блог темно синий и белое меню смотрится некрасиво). Когда я меняю его в background: #fff - получается фон простых менюшек синий, а многоуровневых - остается белый(причем фон выпадающих из них подменю синий). И еще вокруг меню белая окантовка остается, очень мешает. Можно ли её убрать?
NMitra
Покажите на скриншоте что вы хотите.
Наталка Михайлівна Зуб
Если бы я еще знала, что такое скриншот...
Наталка Михайлівна Зуб
В общем, я бы хотела сделать меню, как описано здесь:http://www.portal-sayt.my1.ru/publ/vertikalnoe_menju_92_navigacija_sajta/1-1-0-16. Но здесь оно белое, а мне нужно например синее (под мой блог http://revival2012nataliz.blogspot.com), белое не смотрится.Как это сделать? И можно ли убрать окантовку меню(оно остается белым).
NMitra
Удалите
border: 1px solid rgb(140, 140, 140);
Замените
.suckerdiv ul li a{
background: #4682B4;
}
Наталка Михайлівна Зуб
Это нужно заменить в коде меню? Я там заменила, но все осталось как было.
NMitra
http://rezultat-blog.blogspot.ru/
Первая статья тестового блога.
Наталка Михайлівна Зуб
ОГРОМНОЕ ВАМ СПАСИБО!!!!!!! Вы просто даже не представляете, как вы мне помогли!БОЛЬШОЕ БОЛЬШОЕ СПАСИБО ТЫСЯЧУ РАЗ!!!!!!!!!!!!
Наталка Михайлівна Зуб
Последний вопрос - его можно вставить как гаджет, или только через шаблон. Как лучьше?
NMitra
HTML код в гаджет HTML/JavaScript. Стиль CSS в соответствующее поле "Дизайнера шаблонов" - http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
NMitra
Но такой код я бы весь внесла в гаджет.
Наталка Михайлівна Зуб
Спасибо еще раз. Я действительно наверное весь код внесу в гаджет, а то у меня там в шаблоне уже столько всего внесено, что потом не разберешься.
Наталка Михайлівна Зуб
Блин, ну я тупая. Все сделал, заменила в коде меню все ссылки на свои, свои названия. Все работает, кроме выдвигающихся подменюшек(они не выдвигаются их не видно).Там еще не знаю какой адрес ссылки нужно в этом месте:"subfolderstyle" href="http://forever-web.ru/load/12" Программы И ЗДЕСЬ "subfolderstyle" href="http://forever-web.ru/load/1" Все для uCoz(Это пункты меню,кот.с подменю)
NMitra
Ваши любые ссылки.
Юрий
Наташа, уже несколько раз сталкивался с проблемой адаптивного background, но пока не нашел достойного способа решения. Суть в том, что при прописывании background-size: 100% auto (или background-size: 100% 100%) при уменьшении ширины экрана изображение пропорционально уменьшается. Но... При этом оно "уезжает" вверх (срабатывает автоматически определяемая высота auto). Если background - фон всего шаблона, то особых проблем нет. Другое дело, если background - это баннер в хедере. Тогда между ним и нижележащей секцией при сужении экрана образуется огромный промежуток. Как от него избавиться средствами css?
Пока что знаю только один способ: сделать несколько дополнительных изображений соответстующего размера и прописать пути к этим картинкам посредством медиа запросов для разных разрешений мониторов. Но этот вариант отнимает прилично времени, т.к. приходится еще позиционировать background. Может существует более простой вариант?
NMitra
Живой пример нужен, сделайте на странице все изменения, отпишитесь в комментариях куда смотреть. Таких проблем в общем-то не должно быть, особенно если указывать background-position
Юрий
Наташа, добрый день. Вот ссылка на заготовку этой темы:
http://test.a-cont.ru/?themedemo=Cipriano
Чтобы было нагляднее, шаблон разместил на сайте третьего уровня.
NMitra
Надо пропорционально изменять размеры .pizza_main2

<div class="pizza_main2"></div>

.pizza_main2 {
width: 100%;
padding-top: 40%;
background: url(http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s00/parovozik.jpg) no-repeat;
background-size: 100% auto;
}

Подробнее http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html#video Верно я поняла проблему?
NMitra
width: 100%; не обязательно писать
Юрий
Наташа, .pizza_main1 и .pizza_main2 - это два изображения, наложенные друг на друга.
.pizza_main2 - прозрачная (opacity: 0;).
При наведении курсора это изображение появляется (:hover {opacity: 1;}). Тут все нормально.
Дело в том, что при уменьшении ширины экрана образуется большой разрыв между баннером и нижележащей секцией, озаглавленной "Наши преимущества". Как избежать появление этого промежутка просто не знаю...
NMitra
Сделайте для них одну обёртку, а .pizza_main1 и .pizza_main2 рассчитайте в процентах от обёртки
Юрий
Спасибо! Буду пробовать...
Юрий
Наташа, спасибо большое за ваши советы. Воспользовался инфой с вашего предыдущего комментарии (где упоминается padding-top: 40%). Сначала не смог понять, для чего он нужен. Оказалось, что с его помощью изображение как раз и адаптируется.
Прописал для изображения
:before
content: "";
display: block;
width: 100%;

а затем
background-size: cover;
padding-bottom: 56.25%
В итоге все получилось.
Еще раз большое спасибо!
Pashok927
Здравствуйте Наталья,делаю сайт,мне хотелось бы реализовать на своем сайте как бы 2 фона:что бы первый фон был картинкой сверху ,а потом плавно переливался в какой-нибудь цвет,примерно как реализовано здесь -http://www.igromania.ru/
Буду благодарен за помощь в реализации.
NMitra
Здравствуйте, картинка тяжёлая, поэтому её подгружают в последнюю очередь, например, с помощью window.onload. В Фотошопе когда сохраняете картинку, то ставьте галку Interlaced - будет плавная загрузка.
NMitra
То есть изначально стоит только background-color, а потом добавляют background-image. Пример того, как с помощью JavaScript можно поменять CSS http://shpargalkablog.ru/2013/08/appendchild-removechild-javascript.html#sozdat Только вам нужно не при клике, а при полной загрузки остальных элементов страницы.
Анонимный
Добрый день. Подскажите, пожалуйста, есть ли у Вас статья про CSS фильтры и их использование. CSS Filter blur родительский элемент передается. А как сделать чтобы на другие блоки свойство blur не передавалось?
NMitra
Добрый день. Толком не разбиралась, но ведёт себя как ожидается http://jsfiddle.net/NMitra/tqdfsytp/

img {
position: absolute;
left: 0;
-webkit-filter: opacity(.4) blur(5px);
filter: opacity(.4) blur(5px);
}
Анонимный
Спасибо большое за ответ. Нет ли возможности применить свойство blur к div с классом "one", а div'у с классом "two", что находится в предыдущем div'e убрать использование сво-ва blur.
div class="one"тест div class="two" еще текст /div
/div
.one{
width:500px;height:300px;background:gold;
-webkit-filter: opacity(.7) blur(5px);
filter: opacity(.7) blur(5px);
}
.two { width:300px;height:100px;background:black;
-webkit-filter: blur(0px);
filter: blur(0px);}
П.с. простите за тяжелый русский))
NMitra
Поняла как с opacity ( http://shpargalkablog.ru/2013/02/opacity-css.html )

Можно через вложенный div http://jsfiddle.net/NMitra/tqdfsytp/1/

<style>
#one {
position: absolute;
-webkit-filter: blur(5px);
filter: blur(5px);
}
</style>

<div>
<div id="one">раз раз раз</div>
<div id="two">два два два</div>
</div>
NMitra
Ещё забыла добавить
z-index: -1;
Муслим Гасанов
Спасибо. Вы очень помогли.