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

newyaerfon000

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


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

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

#page:before {
    margin:21px;
    background-image: url("http://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,

Скачать её можно здесь — «http://mnogoblog.ru/wp-content/uploads/2015/12/newyearsnow.jpg»

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

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

newyaerfon000

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


knopkisoc

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>