border images around body, footer, and widget areas

[Pepper]

Pepper

May 23, 2016 at 8:52 pm

I’m trying to add images around the body, footer, and widget areas. I want it to look like this site: *Login to see link but to be responsive.

What I have so far (body and widget only yet) isn’t lining up quite right. I’m sure there’s a better way. Can you please help me with this?

BODY
.wrap.contentclass {
background: url(http://…/content-mainbg-top2.png) no-repeat top / contain,
url(http://…/content-mainbg-bottom3.png) no-repeat bottom center / contain,
url(http://…/content-mainbg.jpg) repeat-y 50% 50% / contain;
clear:both;
padding: 50px 10px 20px 10px;
margin: 0 0 20px;
}

WIDGET:
.sidebar .widget h3 {
background:transparent url(http://…/widget-heading.png) no-repeat scroll 10px 14px;
display:block;
color: #352014;
font-family: ‘Lato’, sans-serif;
font-size: 22px;
font-weight: bold;
letter-spacing: 1px;
padding: 8px 30px 10px 50px;
}
.sidebar p {
font-size: inherit;
padding: 0 15px 15px 15px;
}

.sidebar .widget {
background: url(http://…/sidebar-widget-top3.png) no-repeat top center / contain,
url(http://…/sidebar-widget-bottom4.png) no-repeat bottom center / contain,
url(http://…/sidebar-widget-bg-left1.png) repeat-y left center / auto,
url(http://…/sidebar-widget-bg-right1.png) repeat-y right center / auto;
padding: 50px 10px 20px 10px;
margin: 0 0 20px;
overflow: auto;
}

.sidebar section.widget ul li {
background: url(http://…/separator.png) bottom center no-repeat;
}

.sidebar section.widget ul li a {
display: block;
background: url(http://…/arrow.png) no-repeat scroll 13px center;
padding: 8px 4px 8px 40px; }

FOOTER:
No ideas yet…

Thanks again.