Correctly Displaying Your Logo With CSS
Every site has a logo, and whether it’s a page filling feature or a small design element, it often forms the primary title feature of your page. This article will show you how to implement a logo using correct semantic markup and simple HTML code, with all the presentation done via CSS.
It’ll ensure that those browsing your site without images will see a decent alternative, and provide search engines with a correct representation of your page title.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Let’s start with with HTML code. It needs to be as simple as possible, showing only the name of your site/logo enclosed within header tags and a link:
<h1><a href="https://designshack.net">Design Shack</a></h1>
Now once you have the HTML code in place, it’s simply a case of styling it with some straight forward CSS.
h1 {
text-decoration:none;
border:0;
width : 162px;
height : 113px;
margin : 0;
padding : 0;
background : url(/images/logo.gif) no-repeat 0 0;
}
h1 a {
display : block;
height : 113px;
text-indent : -9999px;
}
This CSS does two main things:
- It tells the browser to create a certain area for your logo, and apply a background
- It moves the actual text to display out of view (9,999 pixels to the left)
If someone browses to your site with CSS and images enabled, they’ll see your beautiful logo. If not, the background image won’t display – but the text indent won’t be applied either – meaning they’ll see your heading text as normal. Perfect!
It’s a simple but effective way to ensure your logo displays correctly, remains accessible, and is picked up correctly by search engines.