Sounds good, I think this is the easiest way to achieve what you’re looking for
in the HTML you’ll need to add an id to the h1 tag there… so the first few lines will look like
<div id=“content”>
<h1 id=“page_title”>
<a href=”/”>Untitled</a>
</h1>
So we’ve added the id=“page_title” which we’ll then use to identify that h1 in the css. In your css file now, you’ll want to add some additional rules for that heading, I would add these right below the #content rules you’ve added to keep your changes in one place…
#page_title {
height: {your image height in pixels}; for example this would read “height:300px;”
width: {your image width in pixels};
background: url(./url-to-your-image.jpg) center center no-repeat;
text-indent: -5000px; This will move the text, if you’re using an image instead
padding: 0;
margin: 0;
}
The padding rule may not be necessary (there’s no padding on the item) but should keep you solid for future changes.
It’s worth noting that the text inside the H1 should match whatever your image ‘says’ so it will make sense even when images aren’t available for whatever reason. So if this image says “My Big Bad Blog” then your h1 should read
<h1 id=“page_title”>
<a href=”/”>My Big Bad Blog</a>
</h1>
Also, if you don’t need that text to link anywhere, it would be best to eliminate the anchor tag all together… and just make it, this will just remove clutter and cause less confusion for visitors…
<h1 id=“page_title”>My Big Bad Blog</h1>
I hope that helps and let me know if you have any questions.