Depending on the theme you are using, it may already be in an H1. If not, make it so. Tweak styles till satisfied.

Now, you gave us the code to get the website title to vary from H1 to H2,
now, how do we get the post title to be the H1 in the inner pages ?

Thanks !

Norm here, I believe you are over thinking it.

Your markup seems a little off but that’s probably because WordPress is parsing it as HTML so some of it isn’t showing.

So just to be clear, the id has to be within a tag such as H1 or div so it would look more like the following…

<div id=”logo”> </div> or <h1 id=”logo”> </h1>

Then you need to put your text in there, the text you want hidden…

<div id=”logo”> TEXT </div>

Next, insert a <span></span> inside the div… The span is where you’ll place the image…

<div id=”logo”><span></span> TEXT </div>

Now in your styles do whatever you need to do with the “logo” div, float or whatever.

REMEMBER to put in the relative positioning. Very important.

Next, put logo.png in the span, position:absolute. Absolute positioning is always relative to the nearest container that is also positioned, therefore it is positioned absolutely relative to the div which is positioned relative… did that make sense??? see below

#logo {
position: relative;
height:57px;
width:627px;
display:inline;
float:left;
margin:28px 0 20px 6px;
}

#logo span {
position: absolute; width: 100%; height: 100%;
background:url(images/logo.png) no-repeat;
}

This works, I just tested it.

im gettin crazy with this “hidding text” thing…

In i have this line

and then in

< id="logo">
<a href="/">

</>

and in css I have this

#logo {
height:57px;
width:627px;
background:url(images/logo.png) no-repeat;
display:inline;
float:left;
margin:28px 0 20px 6px;
}
#logo br {
display:none;
}
#logo a,
#logo a:visited {
display:block;
font:bold 33px/40px arial;
color:#313437;
margin:-7px 0 0 55px;
}
#logo em {
display:block;
clear:both;
font:bold 15px/20px arial;
color:#035f26;
margin:-5px 0 0 56px;
}

I have tried dozens of formula of inserting a “image.png” with transparent background but it always finish unaligned. Please, could you give a try???

Thanks!

This works really great for clients who insist on fancy fonts that aren’t web compatable.

And when your done you can still make a mobile stylsheet and your site will be mobile friendly as well.

CSS:
h1 { position: relative; overflow: hidden; }
h1 span { position: absolute; width: 100%; height: 100%; background: url(image.gif) no-repeat; }

HTML:
<h1><span></span>Title</h1>