Header repeats itself when viewed on some devices, or a smaller browser size

I've noticed that when I add a custom header and view the site on a device such as a phone, the header is shown as normal and then repeats itself twice.

I'm pretty sure that there is somewhere to add the no-repeat in the css, but I don't see where that is. I've taken a look at the header section of the CSS, buit don't see it there. The header section in the CSS seems to be just for when there is no custom image, but I might be wrong about that.

This is the CSS for the header:

#header {
background: #01b7e9; /* Old browsers */
background: -moz-linear-gradient(top, #01b7e9 0%, #009ec5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#01b7e9), color-stop(100%,#009ec5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #01b7e9 0%,#009ec5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #01b7e9 0%,#009ec5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #01b7e9 0%,#009ec5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01b7e9', endColorstr='#009ec5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #01b7e9 0%,#009ec5 100%); /* W3C */
	-moz-border-radius-bottomleft: 6px;
	-webkit-border-bottom-left-radius: 6px;
	border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-bottom-right-radius: 6px;
	color: #fff;
}