15 replies [Last post]
heathenx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2005-08-24
Posts: 21
Points: 0

hello,

i'm very new to css...so be gentle.

my problem: i wish to add a left and right image to my css code that will make my container appear like it's raised. i see it sooooo many times on websites and i would like to include it on mine. for instance, if one goes to http://www.blogger.com/start one can see darker shading on the left and right of the container/body box. how do i do this?

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 16 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

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.

This is my big chance . . . yep, I blew it . . .

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

css container left/right shading...

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.

whiteburn
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2005-09-17
Posts: 1
Points: 0

help please

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?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: help please

whiteburn wrote:
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"

heathenx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2005-08-24
Posts: 21
Points: 0

css container left/right shading...

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

also, thanks for the code snippet.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css container left/right shading...

Chris..S wrote:
Right click and choose, view background image (the image).
Then selecting the "View Style Information" tool

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

heathenx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2005-08-24
Posts: 21
Points: 0

css container left/right shading...

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

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 16 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

css container left/right shading...

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

Right click / Web Developer / CSS / View Style Information

or

Ctrl + Shift + Y

This is my big chance . . . yep, I blew it . . .

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css container left/right shading...

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. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 11 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

css container left/right shading...

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css container left/right shading...

I'm not that fussed about it really.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

css container left/right shading...

Tyssen wrote:
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. :?

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.

diversity
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2005-09-11
Posts: 9
Points: 0

css container left/right shading...

Chris..S wrote:

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

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

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

css container left/right shading...

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

Verschwindende wrote:
  • CSS doesn't make pies

diversity
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2005-09-11
Posts: 9
Points: 0

css container left/right shading...

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

thanks