css container left/right shading...

Check out their background image.

http://www.blogger.com/img/sides_body.gif

Basically you create a long image the stretches across the width of your centered content, add a few extra px's of shadowing to each end, and make sure the ends of the long image match the color of your body's background. That is basically it.

Welcome!

One of the first things to do is to learn to take advantage of the capabilities of your current web browser and if you are using IE, change to a more modern browser (e.g. Firefox).

I use Firefox, so what I am about to say relates to Firefox, although I am sure it will be available in some form or another with other major browsers.

Hover your mouse over the part of the page you are interested in, in this case the shaded background. Right click and choose, view background image (the image). You'll see immediately how they have done it.

Then selecting the "View Style Information" tool, click while hovering the mouse over the same part of the page and you'll see the styles - a quick scan through will show you the background styles used ...

html, body {
  ...
  background:#E1D4C0 url("../img/sides_body.gif") repeat-y center top;
  ...
}

Note: they also use

#body {
  width:710px;
  padding:10px 0 15px;
  margin:0 auto;
}

To give the #body (the main content div) a fixed width and centre it.

The trick is in designing yourself a suitable graphic.

hi im a newbie. i dont really know how to work anything here and i woild like to put a backgroun on my profile in my site. could you help me out by presenting me a layout?

Hi Whiteburn,

thats not really the sort of things we do. There are some excellent tutorials out there, e.g.

www.w3schools.com
www.htmldog.com

or simply google on "CSS backgrounds"

ahh, i see. thanks guys...i'll give it a try.

also, thanks for the code snippet.

I never noticed 'view bg image' before. :roll:
Where's 'view style info' though?

great! it worked like a charm guys. double thanks.

Right click / Web Developer / CSS / View Style Information

or

Ctrl + Shift + Y

I thought Chris was talking about some Firefox default. He should've pointed out that you need to install the Web Developer extension for that to work. For some reason, my option for 'view style info' is greyed out and I can't access it. :?

Re-install Firefox and specify that DOM inspector be installed (custom install?).

cheers,

gary

I'm not that fussed about it really.

Ok, sorry. I tend to forget its not automatic (and also assume most people who develop for the web would choose it).

About the greyed out "view style info". There is a thread around by Larmyia where she had the same problem. The solution could be there.

is there some way I can make the backround repeat-x?

http://home.no.net/bakeme/5.html <- :oops:

To repeat X as well as Y, use repeat instead of repeat-y.

thanks