I've added this code into my style.css:

#page-content{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7560a6+0,d76d77+50,f7ad7d+100 */
background: rgb(117,96,166); /* Old browsers */
background: -moz-linear-gradient(left, rgba(117,96,166,1) 0%, rgba(215,109,119,1) 25%, rgba(247,173,125,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(117,96,166,1) 0%,rgba(215,109,119,1) 50%,rgba(247,173,125,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(117,96,166,1) 0%,rgba(215,109,119,1) 50%,rgba(247,173,125,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7560a6', endColorstr='#f7ad7d',GradientType=1 ); /* IE6-9 */

It works perfectly across all the pages except for contact and about pages.

I'm not sure why its showing a black background on the header, the code says transparent and all the html files link to the same style.css. I've tested in firefox too and the same thing is showing 

Ok thanks!