Sitepoint Members,
I have a 3 vertical column website with a fluid center column and fixed outside columns. Outside all of the columns I have a background. When you scroll the background image is fixed and the text moves as directed. I need an artisitc idea that shows some of the background in one or more of the columns. The way my site is set up now you really don’t get the sense that the text is sliding over the background.
My site is set up like this, but this doesn’t have a background outside the columns. http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
You could use RGBA backgrounds for your columns. It’ll work in modern browsers, so should you use it, make sure the column content is readable without RGBA or provide a full RGB fallback for browsers that don’t understand RGBA.
It’s a new CSS3 feature meaning…you can’t (in older browsers).
Check out this page to see where you can use it. Since IE8 and 7 can’t use it (although thank God that more people are switching to IE9!), it should only be used to enhance a UX, meaning that the site should be fully functional w/out RGBA.
If in the sample website above there’s a purple geometric background - undeneath what we can see on the site, if I wanted to put a narrow vertical window in one of the columns, say 400 pixels high by 10 pixels wide, that revealed the geometric purple design, how would that be programmed ?
Kohoutek,
How about this: How would I make the text transparent and so showing the background? Is that available for only css3? If so how would I adjust for browsers that can’t handle css3?
Right now I have .post{color:#ccccff;padding:1em 0} for the text coloring.
I have text that is white. I don’t want it white. The background is an image. I want the image to show through the text. Is there some simple coding that will do that.
I gave you the code above… If you make the text semi-transparent, then anything that is under it, be it a solid color or a background image, will show through.
Provide a solid color for legacy browsers via conditionals for IE or declare a color with a solid value first, and below it declare color again with RGBA, that way UA who understand RGBA will ignore the first rule and legacy browsers will ignore the second rule.
I think it’d be good if you learned the basics of CSS, otherwise you’ll have a hard time getting anywhere. How to declare a property is something you should know before touching CSS.