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

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

Поддержи проект!!! 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_rotate/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>

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

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


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

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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.