Background-images will this work for all or most browsers?

HTML & CSS
1

Hi there, its been a while since I used css and html and I’m kind of rusty but I guess I’ll start and use an example…


div#header {
	width: 100%;
	margin: 0;
	padding: 80px 0 70px;
	position: relative;
        background-image: url(header_bottom.png), url(header_top.png), url(header_background.png);
        background-repeat: repeat-x, repeat-x, repeat;
        background-position: bottom left, top center, top left;
}

Will this work on most browsers?

Also, I wanted to know, I have an image at the top of my webpage that says “online portfolio of so so, etc…” is it good practice to wrap the text of that image in a h1 tag, then could I use like -9999 text indent on it or will just the alt attribute text be enough?

Thanks for any help.

2

Multiple background images are supported from IE9+. You can check out support here and [URL=“http://www.css3.info/preview/multiple-backgrounds/”]here. You will need some sort of fall-back for older bowers or if the image is just decoration then offer a simpler alternative.

Also, I wanted to know, I have an image at the top of my webpage that says “online portfolio of so so, etc…” is it good practice to wrap the text of that image in a h1 tag, then could I use like -9999 text indent on it or will just the alt attribute text be enough?

Use the Gilder Levin image replacement for best accessibility and SEO. It doesn’t work on transparent images though so isn’t suitable for everything. If the image is transparent then an actual html image with alt and tiltle attribute text is not that bad an option anyway when the image is really content and not decoration.