Dan has it right on both counts. no-repeat means it doesn’t repeat… fixed means it doesn’t scroll (which I advise against using given how badly it performs in firefox and can make scrolling a page really painful – ESPECIALLY if you use transparency)… You’ve got obvious paragraphs, why are you using span? That basically makes the entire content one giant run-on… and using a H4 without a H3, H2 or H1 preceding it doesn’t make much if any sense either.
Since you are just starting out, some advice. If you are choosing tags based on their default appearance, you’re chosing the wrong tags. Heading tags in particular since the first heading on a page should be your H1, all other headings on the page (h2 and higher) being subsections of the lower numbered heading preceeding it. H2’s being the start of subsections of the h1, h3’s being subsections of the h2 before it, so on and so forth. That’s why a H4 by itself makes no sense.
Much less the content of that h4 just looks like a paragraph, while the image before and after appear to be the most likely candidates for H1 and H2…
CSS is only as good as the HTML it’s applied to – my advice is that you learn some semantic markup and what the proper tags are for your markup before you start diving into CSS properties like backgrounds. HTML is for saying what things ARE – headings, lists, paragraphs – NOT how they are going to appear. Appearance is CSS’ job… If you aren’t saying what things ARE in your HTML, you’re going to have a devil of a time applying CSS to it.
Especially if you wrap the semantically neutral inline-level span element around block level content for which we have tags with semantic meaning… and use images for what should be plaintext numbered headings (that if you want images instead of, you should apply them with CSS)
Also you may wish to try learning to code using a MODERN doctype. Transitional basically means you are in transition from 1997 to 1998, and is for supporting old/outdated/half-assed HTML 3.2 coding techniques, NOT for building new websites. (though try to convince the HTML 5 wieners of that).
… and now that webfonts are semi-real world deployable, I’d even consider axing the sandbag spans I put in there for image replacement. As I’ve said several times around the web, CSS is only as good as the HTML it’s applied to… you use bad HTML, bad CSS is bound to follow.
We’ve already been through all this in previous threads :
I realise you said you lost your css files but why didn’t you just use revert to what you’ve already been given previously in the threads above? The last html I posted in the other thread was the last working version of your site. (As others said in the other thread you could have just grabbed the online files anyway but it seems you saw fit to upload and overwrite the good files as well).
This was the last html code that I fixed for you (but the css is taken form an earlier post and not the latest file. I could not recover the css from cache anywhere).
You would never set all paragraphs to be floated and 900px wide as per your example above though as that would be silly.
I also think you need to re-think your design a little as you have large fixed width images and you are trying to squeeze them into a fluid layout. If the images can’t be made to scale then you may have no choice but to either use smaller images or used a fixed width layout.
You should also avoid using images for the headings especially really long images as that is just going to break very quickly. If you can’t use normal browser text then use smaller width headings so that the page isn’t held wide open.
Refer to my (or DS’s) html for the proper way to structure the page.
I threw together some CSS based on what I’m assuming you are trying to do… and redid the images as .png and jpeg to get the filesizes under control – since GIF is an outdated and rarely used format these days that does not give you particularly well optimized images.
I also redid the logo using a stock image to show that a bit of shadow around the text can actually make it legible.
I did not even try to match your font, and got rid of using images for the subheadings – web fonts can deliver that to pretty much 100% of the audience now (hell, it even works in IE5) and means you don’t have to make a custom image each and every time you want a fancy header.
Take the font you want to use, run it through font-squirrel, you’ll be better off in the long run.
I also tweaked the colors to meet accessibility norms, as yellow on white is effectively invisible.
is unlocked so you can get at the various sub-files it’s built from. I also put a few more comments in the CSS than I normally would. Takes what you were doing down from 254k to a mere 102k. (well, plus anywhere from 60k to 160k depending on what font tech actually works in the target browser – christmas on a cracker SVG sucks!)
If I have time later I’ll toss together a section-by-section breakdown of the how/why/what of my code. (no promises today on that though).
: