Newb: Help with Some social media icons and background image

Hello All,

I am building a new website with a friend and i need some help with CSS and HTML please.

AIM: we are looking to align some Social media icons to the right hand side of all Wordpress posts, with a background image.

We are half way there.

Please see how it currently looks here: [URL="http://www.sevault.com/hello-world"]http://www.sevault.com/hello-world[/URL]

This is the background image we would like the icons to sit inside

Ideally it would look something like this:

The bottom 'share this' button will be transparent and ideally want all icons centered.

I can't seem to get past where I have got - [URL="http://www.sevault.com/hello-world"]http://www.sevault.com/hello-world[/URL].

Would also be nice to have a little spacing around the image so the text isn't too close.

The code i currently have is:

<div class="textwidget"><div id="socialmediaicons">
<div><div class="linkswrapper">
<div class="twitter-box"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a></div>
</div><div class="facebook-box"><div id="fb-root"></div></div><div class="google-box"></div><div class="linkedin-box">
</div>
</div>

</div>

and the code for the share this button is

and i have added this to the CSS file

#socialmediaicons {
  background-color: #FFFFFF; height: 155px; padding-top: 11px;

Would appreciate any advice you can provide to get me over the line.

many thanks for your time.

Josie