Фон сайта

Как сделать и изменить фон на сайте

Сделать фон для сайта из фотографии, картинки или какой либо текстуры совсем несложно. Если вы ещё не знаете как это делается, то изучив данный материал и просмотрев видео-урок, Вы шагнёте на новый этап и вам откроется простота и лёгкость понимания такого языка программирования как CSS.

Фон сайта или любого другого отдельного элемента на странице сайта, называется бекграундом. Поэтому грамотно говорить не фон сайта, а бекграунд сайта (от английского backgraund).

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

Фон или бекграунд относится к CSS свойствам. Как известно, CSS не зависит от движка сайта, хостинга или сервера, где расположен сайт. Единственная зависимость у CSS - это браузер у посетителя зашедшего на ваш сайт. Есть ещё древние версии браузеров, которые умеют читать не все стили. Ну и скорость интернета у пользователя тоже влияет на то что он увидит на нашем сайте.

Чтобы у сайта или отдельного его элемента (блока) сделать цветной фон, нужно в CSS свойствах элемента задать свойство background-color:

background-color: #000000;

Если мы хотим задать фон состоящий из двух цветов (градиент), задаём CSS-свойство background-image:

background-image: linear-gradient(to top, rgb(249, 255, 0) 50%, rgb(3, 6, 255) 50%);

Если мы хотим градиент из трёх цветов:

background-image: linear-gradient(to top, rgb(255, 0, 18), rgb(249, 255, 0), rgb(6, 255, 0));

Изображение как фон сайта или определённого элемента на сайте

Чтобы сделать фоном сайта фотографию, картинку или любое другое изображение, используют CSS-свойство backgraund-image, а в параметрах пишут url и в скобках путь к изображению которое устанавливается как фон.

Несколько примеров кодов применимых для паттернов:

с путём относительно файла с кодом:

background-image: url("../images/bg.jpg");

или можно взять изображение из ссылки:

background-image: url("https://precode.top/images/bg.jpg");

путь к изображению от корневой директории:

background-image: url("/images/bg.jpg");

Изображение на весь экран без повторов и прокрутки

background-image: url("/images/RedHot.jpg");
background-attachment: fixed, fixed;
background-size: 100% 100%;

Прозрачный фон

Если нужно сделать фон с прозрачностью, то для этого задают цвет в формате rgba, который имеет альфа-канал отвечающий за прозрачность:

background-color: rgba(255, 255, 255, 0);