Thankfully for me this excellent tutorial on Creating Reusable & Versatile Background Patterns from Web Designer Wall details exactly what is involved in extracting the pattern from an existing image.

View demo

It also important to add the trademark ™ symbol to the logo, which as specified on the Intellectual Property Office website is perfectly acceptable to use without the logo being registered.

(the ™ symbol) … does not indicate that your trade mark is actually registered, only that it is being used as a trade mark. The symbol ‘TM’ has no legal significance in the United Kingdom.

The problem came down to the fact that in the CSS the background-image was only being attached to the body element, this was sufficient for every other browser I tried but Chrome required the background-image also be attached to the html before the image would load.

/* Not working */body {background-image: url(../images/bg-primary.jpg);} /* Working */html,body {background-image: url(../images/bg-primary.jpg);}

Initially looking at the syntax for this it doesn’t appear to be possible, however this can be done using the following simple trick as originally documented on Design Shack and CSS Tricks.

div {background: black;color: #fff;margin: 0 auto;padding: 100px 0;-webkit-transition: -webkit-border-radius 0.5s ease-in;-moz-transition: -moz-border-radius 0.5s ease-in;-o-transition: border-radius 0.5s ease-in;-ms-transition: border-radius 0.5s ease-in;transition: border-radius 0.5s ease-in;text-align: center;width: 200px;}  div:hover {background: gray;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);transform: rotate(720deg);}

The key to achieving the desired behaviour on mouse in and mouse out is to specify the mouse over transition in the hover state and the mouse out transition in the regular state.

View demo