Фон сайта

Как сделать фон для сайта из фотографии, картинки или какой либо текстуры. CSS-свойства background-color и background-image.

паттерн трава

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

  Сделать фон для сайта из фотографии, картинки или какой либо текстуры совсем несложно. Если вы ещё не знаете как это делается, то изучив данный материал и просмотрев видео-урок, Вы шагнёте на новый этап и вам откроется простота и лёгкость понимания такого языка программирования как 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("http://inter-net.pro/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);

 

Записи по теме
Фон для сайта в тетрадную клеточку на чистом CSS
тетрадная клетка Как сделать фон такой же как тетрадка в клеточку на чистом css. Примеры фонов в клеточку, а так же решения с размещением красных полей с левой или с правой стороны. Всё как в настоящей тетрадке.
Фоны на чистом CSS - сборник
звёздочки Подборка CSS фонов для сайта, которая сделает ваш сайт более стильным, оптимизированным и быстро-загружаемым. Используйте CSS фоны для оформления сайта.

 

 

Комментарии 0

*** чтобы писать комментарии.