Forum Moderators: not2easy
site: <>
Thanks for any help.
[edited by: SuzyUK at 7:37 am (utc) on July 6, 2008]
[edit reason] PLease no URI's please see sticky post at top of page [/edit]
sorry about the URL, i know it can be frustrating when you're new to CSS, to have to guess at what might be wrong..
however as Sunday is help/clue day ;) You see the "Guide to posting HTML & CSS" thread at the top of the forum, check out point #4
in this thread [webmasterworld.com] I think you'll find the first paragraph interesting
[A Doctype] should be the first line of your HTML document, right before the opening <html> tag. No white space no comments no anything else should appear before it
Yes, I corrected my own double negative
IT might not help fix it all, I didn't check, but it should help level the field
[edited by: SuzyUK at 7:56 am (utc) on July 6, 2008]
Sorry about the link, I knew the rules but I was kinda desperate to get it fixed. :).
I am trying multiple CSS background images. The background images has two shades, something like the header of the freelanceswitch website, same way at the bottom of the background but turned over. Funny thing is after pulling out all my hair (what left of it), I finally figured out that the all mighty Firefox doesn't support multiple background images, IE is out of the question, this only works with safari. considering the fact that only .001% of my site viewers probably uses safari. I have to cater for the majority of my viewers.
How do I fix this so this works on all browsers; please go easy on me, I am new to CSS.
body
{
font: 0.71em/1.5em Verdana, Arial, Helvetica, sans-serif;
background-color:#D0CAB4;
background-repeat:repeat-x;
background-image:url(/img/back.jpg), url(/img/foot.jpg);
background-position: top right, bottom right;
color:#646060;
width: 980px;
margin:0 auto;
padding:0;
}
what you can do is like a vertical "sliding door", put one image bg on the body element and put another on the html element
HOWEVER this also has an overlap support problem whereby IE doesn't support that in IE5.x Quirks mode (which may or not be a problem for you.. anyway this is why most sites/templates now have a "wrapper" or "container" div i.e. just inside the body element they create a "fake body" div, this allows for background images to be placed top and bottom of the page, and it has multiple other uses as well
your layout/template may already have a wrapper div in which case you might be able to use body & wrapper instead of html & body
now clue no.2 ;) the freelance site you refer to as an example, take a look at their top background image, (FF >>Tools >>Page info >>Media (bg-green) you will see the whole top image and the background which repeats half way down the page, is actually built as one image which might or might not help with what you are trying to do
if not it should be a simple case of repeating the top image on the outermost element, with the preferred background color, then on the innermost wrapper repeat the bottom image with a transparent background and background-position it to the bottom of the wrapper
there's so many ways it could be done there's really no right way, just think about the elements you already have in place, perhaps they could be used?, e.g. attach the bottom part of the graphic to the footer maybe with some extra padding or the likes
do you want
dark brown (gradient?) - approx 240px high
white line - 1-2px
beige background (for majority of background)
white line - 1-2px
dark brown (gradient? reverse of top) - approx 240px
where the page content is in a separate area overlapping every single part of the image(s) and the beige part stretches to fit
