Давайте продолжим рассматривать использование псевдо-элемента before и в данной статье он позволит нам создать смещение фонового изображения за пределы окна, блока.

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

 
Давайте рассмотрим вот такой пример:

Обратите внимание на квадратик – это и есть картинка с фоновым изображением и она расположена за пределами блока!

Реализовать этот эффект достаточно просто.

Для этого заходим в панель управления вашим сайтом на wordpress, открываем любую запись (можно создать данный эффект не только в записи, но и в любом месте вашего сайт, например в шапке) и переходим в ее редактор, в закладку HTML.

А теперь просто вставляем блок div, к нему мы позднее припишем нужный стиль, который и создаст вышеуказанный эффект.

<div id="position-box">
        <p>This background image can be positioned from the right and 
bottom because it is using a pseudo-element to act as an additional 
background canvas.</p>
        <p>The CSS3 background module allows this but is not yet 
implemented in many browsers. The pseudo-element technique also has the 
added benefit of being able to crop a background image and even position
 it partially, or completely, outside its container.</p>
</div>

Пока ничего необычного, просто блок div и текст.

Далее нам нужно открыть файл стилей (style.css) нашего сайта и прописать для данного блока (div id=”position-box”) следующий стиль:

#position-box {
    position:relative;
    z-index:1;
    padding:20px 80px 20px 20px;
    border:1px solid #ddd;
    color:#fff;
    background:#4B92C0;
    width:400px;
 
 }
 
#position-box:before {
    content:"";
    position:absolute;
    z-index:-1;
    bottom:-40px;
    right:-90px;
    width:195px;
    height:230px;
    background:url('/wp-content/uploads/2012/11/the-box.png');
}

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

Идентификатор position-box – отвечает за стиль отображения самого блока.
Идентификатор position-box:before – добавляет стиль перед блоком “position-box”.

Подробнее идентификатор position-box:
Два первых параметра (position, z-index) не трогаем.
padding – отступы текста в блоке сверху, справа, снизу, слева.
border – граница в блоке.
color – цвет текста в блоке (fff – белый).
background – цвет фона блока (4B92C0 – синий).
width – ширина блока.

Подробнее идентификатор position-box:before:
Три первых параметра (content, position, z-index) не трогаем.
bottom – отступ снизу от блока.
right – отступ справа от блока.
width, height – ширина и высота блока (задается такая же как у картинки, например в нашем примере картинка the-box.png имеет размеры 195 × 230)
background:url – ссылка до картинки, которая будет на переднем плане.

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

 
PS: Попробуйте скачать картинку с квадратиком в вышеуказанном примере (при помощи, например, правой клавиши мыши) – вы не сможете этого сделать :) – это одно из свойств псевдо-элементов.