Фон для сайта CSS/HTML

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

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

Фон для сайта цветом можно сделать с помощью свойства background, применив его к тегу body. Таким же образом можно задать фон и другим элементам на сайте. Для примера, создадим div и применим к нему свойство background с цветом.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-color">Lorem Ipsum</div>
      

CSS


.bg-ex-color{
  background: #a8d7e1; /* Цвет блока */
  width: 100%; /* Ширина блока */
  height: 350px; /* Высота блока */
}
     

Как сделать фон картинкой на весь экран CSS

Для того, чтобы сделать фон картинкой на весь экран, необходимо использовать свойство background-image. Чтобы картинка была на всю ширину фона, нужно в объявлении прописать значение cover. Для примера создадим div, а для фона сайта нужно прописать свойство к тегу body.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-image">Lorem Ipsum</div>
      

CSS


.bg-ex-image{
  background-image: url(image.jpg); /* Путь к картинке */
  background-size: cover; /* Растягиваем картинку  по ширине */
  background-repeat: no-repeat; /* Картинка фона без повторения */
  background-position: center; /* Позиция фона по центру */
}
     

Как сделать фон размытым CSS

Для того, чтобы сделать фон сайта размытым можно использовать псевдоэлемент ::before для тега body, в этом случае в коде HTML не нужно прописывать дополнительный div, только свойства CSS. Но когда нужно сделать фон для элемента размытым можно использовать дополнительный div. На примере показан размытый фон для элемента div, но так же прописан пример CSS для тега body.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-blur">
  <div class="img-blur"></div>
  <span>Lorem Ipsum</span>
</div>
      

CSS для DIV


.bg-ex-blur{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}
.img-blur{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 350px;
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(5px); /* Размытие картинки */
}
.bg-ex-blur span{
  z-index: 2;
}
     

CSS для BODY


body::before {
  content: '';
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  z-index: -1; 
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  filter: blur(5px); /* Размытие картинки */
}
     

Как сделать, чтобы фон на сайте не повторялся CSS

Чтобы фон не повторялся можно использовать свойство background-repeat со значением no-repeat. Если это свойство не прописано, то картинка будет повторяться.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-norepeat">Lorem Ipsum</div>
      

CSS


.bg-ex-norepeat{
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat; /* Фон без повторения */
}
     

Как сделать бесшовный фон для сайта CSS

Чтобы сделать бесшовный фон для сайта, необходимо сначала приготовить картинку, рисунок которой будет совпадать по всем ее сторонам. Для тега body или элемента можно использовать свойство background-repeat со значением repeat.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-repeat">Lorem Ipsum</div>
      

CSS


.bg-ex-repeat{
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: repeat; /* Повторяющийся фон */
}
     

Как сделать, чтобы фон сайта не прокручивался CSS

Для того, чтобы фон сайта не прокручивался можно использовать свойство background-attachment со значением fixed. Если фон сделан градиентом, то это свойство так же подойдет.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-fixed">Lorem Ipsum</div>
      

CSS


.bg-ex-fixed{
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Закрепляем изображение */
}
     

Фон для сайта градиентом CSS

Фон градиентом смотрится очень красиво, как для всего сайта, так и для его элементов. Можно использовать градиент с двумя и более цветами. Для того, чтобы подобрать цвета, можно воспользоваться генератором градиента.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-gradient">Lorem Ipsum</div>
      

CSS


.bg-ex-gradient{
  background: #ed836e;
  background: -webkit-radial-gradient(circle farthest-side at center center, #ed836e 0%, #e32f21 100%);
  background: -moz-radial-gradient(circle farthest-side at center center, #ed836e 0%, #e32f21 100%);
  background: radial-gradient(circle farthest-side at center center, #ed836e 0%, #e32f21 100%);
}
     

Как сделать фон прозрачным CSS

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

Пример

Lorem Ipsum

HTML


<div class="bg-ex-transparent">
  <div class="img-transparent">
    <span>Lorem Ipsum</span>
  </div>
</div>
      

CSS


.bg-ex-transparent{
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.img-transparent{
  background: rgba(0, 0, 0, 0.6); /* Прозрачность */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%; /* Для ширины на весь экран нужно прописать 100% */
  height: 300px;
}
     

Как сделать фон поверх картинки CSS

Фон поверх картинки можно сделать разными способами, один из них с помощью внутренней тени, свойства box-shadow.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-overlay">Lorem Ipsum</div>
      

CSS


.bg-ex-overlay {
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  z-index: 0;
  box-shadow: inset 0 0 0 200vw rgba(0, 0, 0, 0.6); /* Прозрачность с помощью тени */
}
     

Как сделать параллакс эффект CSS

Чтобы сделать параллакс эффект, можно использовать свойство background-attachment со значением fixed и добавить дополнительный div для того, чтобы добавить затемнение.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-parallax">
 <span>Lorem Ipsum</span>
 <div class="parallax-overlay"></div>
</div>
      

CSS


.bg-ex-parallax { 
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}
.bg-ex-parallax .parallax-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6); /* Прозрачность */
  z-index: 2;
}
.bg-ex-parallax span {
    z-index: 3;
}
     

Фон для сайта c анимированным градиентом CSS

Фон для сайта c анимированным градиентом смотрится очень красиво, как для всего сайта, так и для его элементов. Можно использовать градиент с двумя и более цветами. Для того, чтобы подобрать цвета, можно воспользоваться генератором градиента.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-gradient-animation">Lorem Ipsum</div>
      

CSS


.bg-ex-gradient-animation{
  background:linear-gradient(200deg,#a8d7e0,#213b40); /* Цвета градиента */
  background-size:500% 500%;
  -webkit-animation:ServiceAnimation 10s ease infinite;
  -moz-animation:ServiceAnimation 10s ease infinite;
  -o-animation:ServiceAnimation 10s ease infinite;
  animation:ServiceAnimation 10s ease infinite; /* Время смены цвета */
}
@-webkit-keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
@-moz-keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
@-o-keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
@keyframes ServiceAnimation{0%
  {background-position:90% 0}50%
  {background-position:10% 100%}100%
  {background-position:90% 0}
}
     

Фон для сайта с анимацией CSS

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

Пример

Lorem Ipsum

HTML


<div class="bg-ex-animation">Lorem Ipsum</div>
      

CSS


.bg-ex-animation {
  background: url(image.jpg); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-bg 60s linear infinite;
  width: 100%;
  height: 350px;
}
@keyframes animated-bg {
  from { background-position: 0 0; }
  to { background-position: 0 1000px; }
}