Yesterday, I tried to get a SVG (Scalable Vector Graphics) image to work as a background. It did not, both browsers I tried ignored it as a style directive background-image. I know that the image, which is a dialect of XML will render by itslef in the browsers, but I haven't figured out how to mix it with HTML. I have a feeling it is in the namespace declarations I use.
The opacity problem with the overlapping circles drowing out my text as seen with a late webkit browser, Chrome 6.0, is really pretty bad. It looks like I have to make all the circles far less opaque than they are, or make them not overlap at all. Since the original author designed the styles to suggest a poster, not necessarily a background, I may have to fiddle with it some more.
Another issue with any background is the page length, and with this particular background one has to be careful about the font size being appropriate to not run off the background, I need to see how bad this problem is. At least Chrome scales the style with the text, so if you increase the font size the background gets bigger too.
Will this work at all? We will see. If it does it is in the direction I want to go with backgrounds and styles. It is the idea I had in mind, a pastel collored background generated in CSS over which I am writing text.
I could reduce the number of circles by removing the references to them in the unordered list, but I like my name in large letters in the background.
I was able to reduce the box size and get the cliping of the circles to work, but I do not understand how my top margin is set so that I can move my text down into the poster background. Also, I was able to kludge the top margin by adding hard breaks to the HTML. the labels in the unordered list that is used by the CSS to draw the circles do not match the circles that are drawn. To eliminate a circle, you would have to find it in the CSS file. If I move my text before the unordered list it upsets the positioning of the graphics within the box. The text I wrote and the graphics directives are in the same division, but the order matters. That may be due to the CSS.
Even though this is beginning to work as I had envisioned, I can that the background is alittle too opaque. It is drowning out my worderful prose making it harder to read. I might try a bigger font, and I noticed that I did not get the font I wanted in Chrome. I should try this in Firefox 3.0 to see how bad it breaks. Oh, it is pretty bad. In Seamonkey.My name in big black letters clobbers the text. In Mozilla 3.0, the big letters and the border show in the blue color I set for them, but none of the circles. It is actually acceptable.