How do I use an image border in my widget?

Hi, I have created a “silo” footer for a website and want it to have an image top border. The way I want it to look is to sit on top of a footer containing text (a three-widget widget bar)
I’m guessing that I could use the image as a background that sits on top of the blue color and mimic a border. The css I tried was to use the ID# of the wrapper for the three widgets and then use a background declaration. Here’s the goal (it will go across the page and be responsive)
sample overall border: https://s1359.photobucket.com/user/m_meadpond/media/border-blue_zpse22mmfzs.png.html?sort=3&o=2

I thought I could create a square and use it as a pattern horizontally:
https://s1359.photobucket.com/user/m_meadpond/media/61-border_zps0drndiki.png.html

I thought I could just do this:
#builder-module-547f432c620f5-background-wrapper{
background-image: #596C89 url(images/22-border.png) top left repeat-x;
}
But since it doesn’t work, do I need to create a div and float it across?

I’ve searched and searched, but not found the answer.

Thanks,