14 replies [Last post]
ewwatson
ewwatson's picture
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2007-12-19
Posts: 45
Points: 0

Is there a way to have two different background colors on the body without images? I basically want a dark gray main background color and one or two strips of a lighter gray color. These colors will display behind the container div. Is that possible without the use of an image for the background? Thanks guys!:shrug:

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

Put one colour on the body

Put one colour on the body and then use borders/colours/images on the container for the rest of the site for the other colours.

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

d41
d41's picture
Offline
Enthusiast
Last seen: 10 years 12 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

One thing you could do is

One thing you could do is give the body and dark gray background color, then add two strips of light gray by adding an absolutely positioned div or a container with a dark gray background color and light gray borders on the sides. (with a low z-index or something)

EDIT: Tyssen beat me to that solution

If I were you I'd just use an image. Why do you need to do it without and image?

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

I wouldn't use absolute

I wouldn't use absolute positioning; in most cases there's no need.

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

ewwatson
ewwatson's picture
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2007-12-19
Posts: 45
Points: 0

Thanks Guys! Because I don't

Thanks Guys! Because I don't have photoshop yet (so I can't make any images) and I can't find any background images that I like. So I thought I would see if this was an option. It sounds like it is do-able... but background image is easier. I will give it a try tomorrow morning.

OK - so after applying a color to the body, I would then just give the background div a height and some margin for placement, and no width, right? Because I want it to completely fill the width of the browser window. However my wrapper div is 720px and centered. So what z-index would work to place it behind the wrapper? The wrapper is position static. Also, where should I place that background div in my html? My layout is just natural flow. The layout in question is the one under my signature. Thanks for your help!

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

I'm sorry, I don't really

I'm sorry, I don't really get what you're trying to accomplish and looking at what you've already got doesn't help me.

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

ewwatson
ewwatson's picture
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2007-12-19
Posts: 45
Points: 0

I guess I could of explained

I guess I could of explained it better. Basically just a strip of a lighter gray color going from the left side to the right side of the browser window, and behind the wrapper(container) div. Probably like 30px in height and margin-top: 100px or so. Better?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 54 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You might try The GIMP

You might try The GIMP first. It's not PhotoShop, but then it's built from the ground up for web imagery, not print. It'll save you at least a couple of bucks. Smile

See the manual for its capabilities.

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: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You'll need to create a

You'll need to create a repeating-x background-image and put in on the body in combination with the background-color.

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

ewwatson
ewwatson's picture
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2007-12-19
Posts: 45
Points: 0

Ahhh.... so it can't be done

Ahhh.... so it can't be done without images. Oh well soon....thanks guys!

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

Er, no, I just said you had

Er, no, I just said you had to use a background-image. :?

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

ewwatson
ewwatson's picture
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2007-12-19
Posts: 45
Points: 0

Ya, thats what I meant -

Ya, thats what I meant - just left of the background part.

vynsane
vynsane's picture
Offline
Regular
Last seen: 12 years 34 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

you can style the html tag

you can style the html tag one color, and then give it a border, and then style the body tag a certain width and different background. try something like this:

EDIT re-read your request and took the time to put together a little sample that goes a bit more in-depth...

http://www.vynsane.com/samples/graytest.html

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

Andrew Felton
Offline
newbie
Northern Ireland
Last seen: 12 years 35 weeks ago
Northern Ireland
Joined: 2008-02-20
Posts: 1
Points: 0

Background Image

Don't know why this is necessary - using full width divs and / or 2-color image backgrounds should be sufficient

thesmu
thesmu's picture
Offline
Regular
Last seen: 12 years 35 weeks ago
Joined: 2007-08-07
Posts: 22
Points: 0

you could also try a generator site..