Again and again I see templates using H1 as a image background with nothing within the Tag itself, while this isn’t bad SEO it’s not good either. A header tag should be TEXT and be readible by Google and other search engines.
If you take a look at your
your see that there is nothing in it – You should resolve this first off by using a text indent.
Correct Your H1
<h1><a class="customlogo" href="http://www.ctwinvestmentgroup.org/" title="Return Home">CTW Investment Group<a></h1>
Add this to your CSS
.customlogo {
background: url("http://www.ctwinvestmentgroup.com/wordpress/wp-content/uploads/2013/01/CtWDiamond3.png") no-repeat scroll 0 0 transparent;
height: 101px;
width: 500px;
text-indent: -9999em;
display: block;}
Now for Responsive to work with Background images you have 2 options to serve a different image for each device size or serve the same image but resized.
To do this you use Media Queries
Devices Below 768px we divide the logo by 2/3’s
@media (max-width:768px){
.customlogo {
height: 67px;
width: 333px; }
}
Devices Below 480 we half the logo
@media (max-width:480px){
.customlogo {
height: 51px;
width: 250px; }
}
Additional Notes:
Your site is not working as responsive presently since you are blocking it with a fixed size.
Remove
#page {
width: 960px;
}
And the responsive will start working again 😛 Hope this helps and remember H1’s are not IMAGES! as so many people try to do, use a H1 a href with image and text for best SEO 😛
Enjoy