Добавляем прозрачное фоновое изображение на сайте

Здравствуйте, сегодня продолжим украшать наши сайты, а именно добавим фиксированное фоновое изображение поверх сайта и уменьшим его прозрачность.
PS: Работает только на стандартной бесплатной теме – Twenty Sixteen


Скачать исходники для статьи можно ниже

Для этого нам поможет вот такой код:

#page:before {
    margin:21px;
    background-image: url("https://mnogoblog.ru/wp-content/uploads/2015/12/newyearsnow.jpg");
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display:block;
    content: " ";
    opacity: 0.3
}

Его нужно вставить в файл стилей сайта, на wordpress – это style.css (админка wordpress – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов выбираем файл – style.css – и в самые его низ вставляем вышеуказанный код).

Для примера, использована вот такая фоновая картинка:

newyearsnow,

Скачать её можно здесь – “https://mnogoblog.ru/wp-content/uploads/2015/12/newyearsnow.jpg”

Можете загрузить её на свой сайт и поменять ссылку в коде.

В итоге должно получиться следующее (тема Twenty Sixteen):

newyaerfon000

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий