Question about css limitations

If i want to use an image as my entire header is that considered bad? Should it be done with just css? Also what about nav buttons? Can i use images as the buttons or should i only use css for it?

 

You may use images for both purposes, actually. But to implement these images is better with CSS, that's true. Is it good or bad depends on what you mean by these notions.

 

I decided to use an image but the thing is that behind it there is a glow effect and when i use this image as my header then it looks out of place compared to the background color of the page despite them being similar colors. Do you know if it's possible for a solution to this?

Here is an image.

http://i.imgur.com/wYuAPFr.png

 

There's nothing wrong with using an image as presentation, but if it's presentation it doesn't belong in the markup, it belongs in the CSS as background-image.

In the case of a page header, you should still have a numbered heading tag, most likely a H1 since H1 means "the heading under which all content of the page is subsections" just as H2 indicates the start of a subsection of the H1 before it, h3 means the start of a subsection of the h2 before it, and so forth.

To use the image, I would probably go with something like gilder-levin image replacement.

<h1>
  Taffies Cupcakes<br />
  <small>Fresh and Tasty</small>
  <span><!-- image sandbag --></span>
</h1>

Code (markup):

You style the text as close to the image as you can so that user agents who don't see images like screen readers and search engines have meaningful text, then you absolute position the span OVER the text hiding it.

When it comes to menu buttons, you can use images in them as backgrounds to an extent, but really in this day and age you should just say no to images as buttons unless you REALLY know what you are doing.

 

Just to show you what I mean, I tossed together a demo based on your little picture here:
http://www.cutcodedown.com/for_others/ralph-design/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/ralph-design/

is wide open for easy access. Layout tested all the way back to IE6 working fine, working in a usable though not perfect fashion in IE 5.x. Shows that image replacement in action and if you view the page without images, it still works. I also made it a responsive layout using media queries to strip off the columns when the page narrows; and it pulls the logo image off showing the text instead since then the 'heading' can re-arrange itself as desired/needed, something an image cannot do.

I'd probably throw a few box-shadow's on there too, but for now it's a decent accessible and semantically built page. If you want, I can do a breakdown of the how/what/why of both the markup and CSS if you need it.

 

I used the image with the title "taffies cupcakes" as an image for the header since it's really the logo. I used img src instead of background image,is there much of a difference?

 

1) it's the only candidate structurally for the H1 of the page, so it should be in a H1.

2) The image is presentation of text, so you should have the TEXT in the markup.

The reason to put it in the CSS with a image replacement technique is so that screen readers and search engines have something to look at. ALT text just doesn't cut it on that front. Not all UA's even see images, so as the primary header under which everything on the page is a subsection, an IMG tag semantically means nothing. It's called progressive enhancement -- you build the page by first taking your content or a reasonable facsimile of future content and put it into a flat text editor. You then add your semantic tags (and no, the new HTML 5 bull is NOT semantic even if they claim they are) saying what things ARE, NOT what they look like. Then you create the layout, and pick the presentational images you hang on that layout. Only at that last stage do you add DIV or SPAN since they are semantically neutral and do not change the meaning of their content.

It takes a while to get used to making a distinction between presentational images and content images. A website logo is rarely "content" -- it's usually a presentational affectation of the name of the company... Since not everyone "sees" images having major content sections of text being shown as a image is accessibility trash. It's why as a rule you shouldn't use images for text, and if you do attempt to do so you use a image replacement technique like gilder-levin...

... and if nothing else, it makes it easier to deal with when/if the display is too small to show your image. Again, look at the example I made and narrow your window until the logo disappears and the text is shown instead. That's the flip-side of progressive enhancement, it provides what's called "graceful degradation" -- as the fancy bits go missing or are simply useless to certain types of users, the page is still useful to them.