PDA

View Full Version : Optimizing Background Images

pageoneresults
14-03-2002, 20:54/08:54PM
Good evening everyone! One of the neat little things I've learned here recently with CSS are the background properties of a page. You know how most of us would set up a tiling background, right? We'd probably make a graphic that was 2400px wide and 1 or 2 pixels tall. Or it might be the other way around.

No more of that stuff! Now, you just make your tile the true size it should be and you can control what it does on the page through one of the below properties.

repeat - The image is repeated both horizontally and vertically.
repeat-x - The image is repeated horizontally only.
repeat-y - The image is repeated vertically only.
no-repeat - The image is not repeated: only one copy of the image is drawn.

Your CSS might look like this...

body{
background-color:#ffffff;
background-repeat:repeat-y;
background-image:url('/images/lines-tile-160.jpg');
layer-background-image:url('/images/lines-tile-160.jpg');
}

To see this in action, check out Honour, Inc. (http://www.honourinc.com)

This line of code...

layer-background-image:url('/images/lines-tile-160.jpg');

is the NN4+ fix. For those of you who have been banging your heads on how to get the background images to fill the browser window 100%, this is the solution. Unfortunately it does not validate at the W3C but it does solve the background problem for now.

Hmmm, I think with all the latest CSS I've been building into the sites, I now have my <body> fat down below 10%. I wonder how much further I can go?! ;)

P.S. You know, after viewing the source code of the above page, I cannot find anything that I could possibly trim any further. Can you? Don't be dissin' my webbots either!
pageoneresults
14-03-2002, 21:08/09:08PM
You can also position your background. Let's say you have a vertical background image and you want it to center on the page. You just insert this into your style...

body{
background-color:#ffffff;
background-repeat:repeat-y;
background-position:center;
background-image:url('/images/lines-tile-160.jpg');
layer-background-image:url('/images/lines-tile-160.jpg');
}
pageoneresults
14-03-2002, 21:12/09:12PM
Add this...

body{
background-color:#ffffff;
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
background-image:url('/images/lines-tile-160.jpg');
layer-background-image:url('/images/lines-tile-160.jpg');
}

or this...

body{
background-color:#ffffff;
background-repeat:repeat-y;
background-attachment:scroll;
background-position:center;
background-image:url('/images/lines-tile-160.jpg');
layer-background-image:url('/images/lines-tile-160.jpg');
}

Fixed is the same as the infamous watermark feature in Front Page.

Scroll of course is self explanatory. Default (no property) is scroll.

More info here at the W3.org (http://www.w3.org/TR/REC-CSS2/colors.html)
pageoneresults
14-03-2002, 21:23/09:23PM
Make sure you have a color specified for any text that appears over a dark background. It can be any color as long as it provides contrast against a white background. This will insure that those surfers who have images off (how dare them), will still see content without the background image.

P.S. I would never recommend working with white text anyway #ffffff. That was the mistake of many designers back in the days when the invisible text filter surfaced. I remember reviewing sites that had dark color backgrounds in cells with white reverse text and page backgrounds set to white. Talk about flagging spam filters, ouch! And this not on purpose, but purely by mistake.

Okay, how many of you just went and double checked some of your light text and dark backgrounds? Hopefully none with the group that is in here!
ihelpyou
14-03-2002, 21:34/09:34PM
Very good tip P1 !!

Of course, for graphic artists and web design graphic experts like myself, rest assured that I already knew that. :green:

But your tips will help many.
ihelpyou
14-03-2002, 21:43/09:43PM
kidding, of course. I could not do graphics if it saved my life. :)

And, I have not even heard of that tip before. A good one!
pageoneresults
14-03-2002, 22:10/10:10PM
I thought you were serious. I was sitting here with my tail between my legs thinkin' to myself, I'll get him one of these days! ;)
ihelpyou
14-03-2002, 22:45/10:45PM
LOL
Hasenfefer
15-03-2002, 15:50/03:50PM
good tip indeed,,,i've been messing with CCS recently and when i clear some projects off my plate i plan on getting into it a little more indepth.