Как сделать так, чтобы изображние добавленное всевдоклассом :after, плотно прилегало к нижней части блока?

Question

[minaev007]

изображения - dropmefiles.com/4IF9F

<div>
    <p>Пункт</p>
    <p>Пункт</p>
    <p>Пункт</p>
    <p>Пункт</p>
    <p>Пункт</p>
    <p>Пункт</p>
</div>

div {
    display: table;
    margin: 0 auto;
    background: url(images/scrollMiddle.jpg) center top repeat-y;
    background-size: 100%;
    width: 500px;
    border: 1px solid black;
    padding: 0;
}

p {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 3px;
}

div:before {
    content: url(images/scrollTop.jpg);
}
div:after {
    content: url(images/scrollBottom.jpg);
}

Под изображением, добавленным псевдоклассом :after, просвечивается основной фон блока. Как это исправить?

Comments

[Андрей Саныч]

имейте совесть)) выложите на фидл)

[minaev007]

Андрей Саныч: не могу просто понять как туда изображения прикрепить. но код щас будет)

[minaev007]

https://jsfiddle.net/jwhy2mpd/

[Андрей Саныч]

minaev007: imgur.com

[tyzberd]

div:before {
    content: url(images/scrollTop.jpg);
    display: block;
}

Answer 1

[AlexRas]

https://jsfiddle.net/jwhy2mpd/1/