Replace #site-title with resizable image in Twenty Twelve? [closed]

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

Leave a Comment