В этом разделе найдутся полезные подсказки, как можно красиво оформить фон для сайта. Фон может быть картинкой, градиентом, прокручиваться и повторяться, может быть и анимированным, в зависимости от того, чего требуется в дизайне.
Как сделать фон для сайта CSS
Фон для сайта цветом можно сделать с помощью свойства background, применив его к тегу body. Таким же образом можно задать фон и другим элементам на сайте. Для примера, создадим div и применим к нему свойство background с цветом.
Пример
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.
Пример
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.
Пример
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. Если это свойство не прописано, то картинка будет повторяться.
Пример
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.
Пример
HTML
<div class="bg-ex-repeat">Lorem Ipsum</div>
CSS
.bg-ex-repeat{
background: url(image.jpg); /* Путь к картинке */
background-repeat: repeat; /* Повторяющийся фон */
}
Как сделать, чтобы фон сайта не прокручивался CSS
Для того, чтобы фон сайта не прокручивался можно использовать свойство background-attachment со значением fixed. Если фон сделан градиентом, то это свойство так же подойдет.
Пример
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
Фон градиентом смотрится очень красиво, как для всего сайта, так и для его элементов. Можно использовать градиент с двумя и более цветами. Для того, чтобы подобрать цвета, можно воспользоваться генератором градиента.
Пример
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 и добавить к нему прозрачность. Для фона сайта можно использовать другой эффект, но для отдельных элементов такой эффект отлично подойдет.
Пример
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.
Пример
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 для того, чтобы добавить затемнение.
Пример
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 анимированным градиентом смотрится очень красиво, как для всего сайта, так и для его элементов. Можно использовать градиент с двумя и более цветами. Для того, чтобы подобрать цвета, можно воспользоваться генератором градиента.
Пример
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
Чтобы создать фон для сайта с анимацией нужно подобрать картинку, рисунок которой будет совпадать по всем ее сторонам. Направление движения и скорость можно поменять, и сделать движущиеся горы, дождь, падающие снежинки или звездопад.
Пример
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; }
}