Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Сделать задний фон адаптивным

Поддержи проект!!! smile

Adaptive background или, как сделать задний фон адаптивным!? Сделаем адаптивный задний фон с примерами.

Подробно об адаптивном фоне на сайте

  1. Адаптивный задний фон с примером.
  2. Адаптивный задний фон с использованием before, с примером.
  3. Скачать можно здесь
  4. Установка адаптивного задний фон по нажатию на кнопку.
  1. Адаптивный задний фон

    Чтобы сделать задний фон адаптивным нам потребуется:

    Начнем с картинки - ведь нам нужен задний фон, поэтому, что-то мы должны же ставить...

    Теперь нам нужно прописать стили css для body

    Далее нам понадобится свойство background, в которое помещаем наш адрес картинки, который приведен выше:

    background: url(//dwweb.ru/calc/__data/__img/big_back.png);

    Добавляем - "no-repeat" - чтобы картинка не повторялась.

    Добавляем - "center" - позиция заднего фона - по-центру.

    Добавляем - "fixed" - картинка будет зафиксирована в одном положении.

    Растягиваем задний фон на всю страницу - " background-size: cover; "

    Соберем все вместе:

    <style>

    body.example_1

    {

    background: url(//dwweb.ru/calc/__data/__img/big_back.png)no-repeat center fixed;

    background-size: cover;

    }

    </style>

    Пример адаптивного фона.

    Давайте посмотрим на пример адаптивного фона.

  2. Адаптивный задний фон с использованием before, с примером.

    Поскольку мы будем работать с адаптивным , но главное слово задним фоном, нам потребуется псевдокласс "before" - это один из вариантов установки "адаптивного заднего фона".

    В общем-то у нас не стоит задача объяснить все строчки!

    У нас стоит задача - сделать код, для "адаптивного фона" - чтобы он работал.
    Единственное..., наверное, стоит сказать, что здесь добавлено размытие "адаптивного заднего фона" на 5px:
    filter: blur(5px);

    Код style для "адаптивного заднего фона"

    <style>

    body::before {

    content: "";

    position: fixed;

    left: -50px;

    right: -50px;

    z-index: -1;

    background: url(https://dwweb.ru/__img/__img_rotane/dwweb.ru.png)center/cover no-repeat;

    filter: blur(5px);

    height: 110%;

    }

    </style>

    Пример адаптивного фона.

    Не буду делать отдельный пример - аналогичный адаптивный задний фон.

  3. Установка адаптивного заднего фона по нажатию на кнопку.

    Для того, чтобы по нажатию на кнопку ставить "адаптивный задний фон" нам потребуется :

    Кнопка для отправки класса в тег body

    <button id="idbutton1">Включи адаптивный задний фон</button>

    Далее нам нужен скриптик... который будет отправлять класс в body и удалять класс при иначе.

    <script>
    var thebody =document.querySelector("body");
    idbutton1.onclick = function()
    {
    if(!thebody . classList. contains("example_2"))
    {
    thebody . setAttribute("class","example_2");
    idbutton1. innerHTML = "<red>Отключи задний фон</red>";
    }
    else
    {
    thebody .removeAttribute("class");
    idbutton1. innerHTML = "Включи адаптивный задний фон";
    }
    }
    </script>

    Добавим стилей к классу "example_2"

    <style>
    body.example_2::before {
    content: "";
    position: fixed;
    left: -50px;
    right: -50px;
    background: url(//dwweb.ru/calc/__data/__img/big_back.png)center/cover no-repeat;
    filter: blur(10px);
    height: 110%;
    opacity: 0.3;
    z-index: -1;
    }
    </style>

    Соберем весь код установки адаптивного заднего фона по нажатию на кнопку.

    Html:
    <button id="idbutton1">Включи адаптивный задний фон</button>

    style
    <style>
    body.example_2::before {
    content: "";
    position: fixed;
    left: -50px;
    right: -50px;
    background: url(//dwweb.ru/calc/__data/__img/big_back.png)center/cover no-repeat;
    filter: blur(10px);
    height: 110%;
    opacity: 0.3;
    z-index: -1;
    }
    </style>

    script
    <script>
    var thebody =document.querySelector("body");
    idbutton1.onclick = function()
    {
    if(!thebody . classList. contains("example_2"))
    {
    thebody . setAttribute("class","example_2");
    idbutton1. innerHTML = "<red>Отключи задний фон</red>";
    }
    else
    {
    thebody .removeAttribute("class");
    idbutton1. innerHTML = "Включи адаптивный задний фон";
    }
    }
    </script>

    Пример включения адаптивного заднего фона по нажатию на кнопку.

    Чтобы активировать "адаптивный задний фон" нажмите "Включи адаптивный задний фон"


Вас может еще заинтересовать список тем : #CSS | #FOTO | #IMG | #BACKGROUND |
Последняя дата редактирования : 01.02.2021 19:51
Название скрипта :Адаптивный задний фон на сайт
Скрипт № 93.2
Пример
Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
адаптивный фон адаптивный фон css как сделать адаптивный фон адаптивный фон для сайта адаптивный фон картинкой адаптивный фон сайта css как сделать адаптивный фон сайта адаптивный фон html как сделать фон адаптивным css

Последние комментарии :
Марат :
08/02/2021 02:50
Всегда пожалуйста приходите ещё!
подробнее.
Павел :
08/02/2021 11:11
Спасибо большое. Очень поучительно.
подробнее.
Марат :
03/02/2021 07:22
03/02/2021Тестирование и разработка Comments+1.5 отложена на неопределенное…
подробнее.
Марат :
31/01/2021 08:31
Всегда пожалуйста!Рад, что помог!
подробнее.
Bambr :
31/01/2021 07:34
Огромное спасибо! )
подробнее.