how to add an image

if i have an image like logo to add it in my page do

<div id="header"></div>
<style>
#header{background-image:url(logo.gif)}
</style>

or in html file add
<img src="logo.gif" class="logo"> and style it like that
<style>
.logo{border:..;
align:...;
margin:...;
and so....}
</style>

 

If i was a adding an image like a logo I'd go for your second method. I only set purely decorative images as css backgrounds.

<style>
.logo{border:..;
align:...;
margin:...;
and so....}
</style>

<img src="logo.gif" class="logo" [B]alt="company logo"[/B]/>

Code (markup):

Remember your alt text though.

 

thanks greboguru for sharing
but is this the best method and i want the ideal one

 

Even better: keep the text for the logo as normal text, and stick an image over it! Best of both worlds : )

Usually where the logo is, if that's the name of the website and in the header, it's usually an <h1> (header tag). So here's what you do:

In the HTML:

<div id="header">
<h1><span></span>Title of Page</h1>
</div>


You don't even need the header div wrapping it but usually people have a bunch of stuff in their headers, so wth.

The span can also go after the text... you get a different effect depending on where you stick it and I keep forgetting the way to do it, cause I think it's spans in fron if the logo is supposed to be clickable and spans in back when it's not? I forget. But anyway:

CSS:
h1 {
position: relative;
width: set the width of the image here;
height: set the height of the image here;
set whatever font you want so long as it's big enough to be readable and small enough to fit behind the logo
}
h1 span {
position: absolute;
width: same as above or 100%;
height: same as above or 100%;
background: url(nameoflogo.gif) 0 0 no-repeat;
}

It works nice. Reference: http://www.mezzoblue.com/tests/revised-image-replacement/
scroll to the last two.

The whole point of this is, you don't want your text to be hidden just because someone doesn't have images (people surf with images off for faster loading, but also the blind and teh googliebots don't see images either... so you want text!). Don't rely on ALT text; it should always be added to images in the HTML but it doesn't always get read by screen readers.

 

My personal preference for logo's is to display them as an image so that I can wrap it in an anchor ... I always think that a pages/company logo should link back to the home page, a shortcut if you like, but then maybe thats just me

<a href="home"><img src="logo.jpg" alt="company logo"/></a>

 

Can do:

<h1><a href="default.php"><span></span>nameofsite.com</a></h1>

Because you are right, lots of people like to click the logo to go back to Home.

 

I'd keep all style tags out of the header. That's what your css file is for. I'd do <div id="header"></div> and then #header{ in your css.

 

^ Correct. However I think some of the non-strict validators out there still let people add style tags to the body, or it's a legacy thing where people used to do it when CSS was new.

 

I've used this method a bunch of times with great results, including putting a repeating image over h1 (etc.) text to doll up headers.

observe;
http://canyonchasers.net/shop/

dp

 

Hi,

Its a nice solution to a problem. The only thing against it is the insertion of the 'empty' span. If you separate the content from the styling the span doesn't add anything to the document structure. I know that its a means to an end, and it achieves it very well. Just wondered if anyone had any comments on that?

gG

 

On this site: http://www.mezzoblue.com/tests/revised-image-replacement/ the extra elements are indeed listed as "cons." It's something that we've all decided to put up with until enough browsers catch up to Safari in allowing multiple backgrounds (CSS3)...

although now that I think of it, if you are adding a link as well, the span is likely not necessary.

<h1><a href="home.html"> </a>Welcome Home</h1>

h1 {
height: blah;
width: blah;
position: relative;
}
h1 a {
position: absolute;
height: see above;
width: see above;
background: url(welcome.png) 0 0 no-repeat;
}


Funny, I've never thought about the extra span after using it once or twice, and then when later asked to add a link, I just did without thinking. So, if the above works (I think so... have to still test knowing me : ), then there are no "extra" elements.

*Edit I've learned that if you want an "empty" a, then there must be a space in the code between the two tags.

*edit, just tried it. Works : )

 

Nice, I'll be adding this technique to my toolbox. I like the way it all holds together if you've got images turned off no styling etc. I'll just suffer the extra tags for non linking headers. Thanks for your time in commenting.

 

It's nicer than the text -999gazillion pixels to the left trick... for when CSS is enabled but images off, there is no text.

 

Out of curiosity, why do you place your image as a background, rather than putting it in your document with <img>?

 

Because some people have this mistaken idea that the logo is the title of the page, when it's the site's branding. H1 headings should be used for the page title, which of course changes with every page (since pages have their own unique titles).

 

I've always thought that if it's a company website, that the name of the company was the title of the page. Every cocoa cola page is Coca Cola first thing. I use an h2 for the part of Coca Cola that that page represents.
<h1>Coca Cola welcomes you to their sugary hell</h1>
<h2>Investor Relations Page</h2>

So, should I be rearranging my pages so the <h2>s are <h1>s and make the Company Name/Site Name a <p> or something? (serious question)

 

Just use the image for the logo/branding and be done with it since it's not going to change (much, if at all) from page to page, and use the H1 heading for the page title (since each page title is unique).

 

To answer mkei's question:

The problem above was that an image was containing text. People who can't see the image can't read the text. So, people use image replacement techniques.

On this page, a fancy font was wanted by the company. Because they wrote it in Publisher... ug. It was all vectors. Unreadable. But anyway, when I redid it, I kept the funky font so everyone (with images on) can see it. Otherwise, they can still read it with images off: http://stommepoes.nl/VanLeeuwenGlas/vanleeuwenglas.html (their design, not mine)
The word "De Organisatie" is image replacement, as well as anything else with a border around the letters (24 uurs service etc). There needs to be text behind it.

If you do as Dan says, then yeah, you can either use <img> or set it as a background image on the header or wherever.

 

To me a logo IS inherently a decorative image - which usually represents the product name, company name or site title - it is a replacement for text and images off it should dissapear and show... text. As such it is presentational in my mind, so I use an image replacement technique (since search engines and such tend to ignore attributes, and alt is an attribute)

Since it's usually the full width header and site title, much like the upper left corner of every page of a book or pamphlet, it's an H1... with a span image replacement.

<h1>
	Site Name Here
	<em>Subtext here if any</em>
	<span></span>
</h1>

Code (markup):

Notice I put the span AFTER instead of before (which is how glider-levin works) - this is for consistancy with other techniques I use... It means you do spend a bit more css stating top:0; left:0; but it also means if I decide to switch to text with sliding doors, or scriptrounds, or use it as the top of 'eight corners under one roof' I can without changing the HTML.

The CSS for that usually ends up something like:

h1 {
	position:relative;
	overflow:hidden; /* chop off text-enlargement  */
	height:80px;
	padding-top:16px;
	font:bold 44px/48px arial,helvetica,sans-serif;
}

h1 em {
	display:block;
	font:normal 14px/16px arial,helvetica,sans-serif;
}

h1 span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:96px;
	background:url(images/logo.png) 0 0 no-repeat;
}

Code (markup):

Of course, that overflow wouldn't be needed if gecko didn't resize content like the sweetly retarded epileptic crack addict cousin of Netscape 3 that it is.

 

I've always gotten confused which way to do it... must be because I never set the coords for the span/whatever that I always ended up sticking them in the front to make them inherently behave.