I have a puzzling issue on a website I'm working on.

I'm trying to learn responsive design and for this web site I'm using the Skeleton Boilerplate files to get started.

I've figured out a lot, but one thing that is really puzzling me is that I can't get a background color for the page unless I set the background color for the body element.
Currently, it's set to white.

I set the html element background color to #999999, but it's only showing up at the bottom of the page, after everything else contained in the body element.

Usually, when I set a background color on the html element, it covers everything except for the container which is in the body.

To make the explanation shorter, here is a test page with the code:
http://upctraining.rccomputersolutions.biz/

I was hoping to show a nice gradient color in the background around the main content if the screen is bigger than the biggest content size. The gray is just there for me to see where it's showing up.

Any ideas?

You'll need to give the body a width (which I'll leave you to figure out):

This shows a white "page" with a black browser background. Put whatever you want for the html background, and when you have the body sized and centered, you'll see it on either side.

I've got some info bookmarked about determining page sizes by percentage... off to hunt for that

Here it is:

I figured out what the problem is.
Thanks for your help. I'm using the Skeleton boilerplate and that is not a fluid grid, but it is responsive. The body element is basically using the entire viewport width unless the size is constrained. But if I give a value to the width of the body element, it breaks other stuff.

Just another learning experience. I might play with making it fluid or just not worry about it. The responsive features work well - I just can't wrap a color / gradient value around the block when viewed on large screens than 960. Kind of an unforeseen side effect of using this boilerplate grid system.

Thanks - I like the information provided at the link - I will use it for other projects.

Thanks Paintbrush great catch, I can use that info. Media Queries The Good,The Bad and the Ugly. Wheres Clint when you need him.

This worked for me...
Put your gradient/color on the body background in place of the yellow (#ffff33)



Then add the white background to the container (in the Skeleton CSS):


Everything stayed within the page when re-sizing.

Very nice. You are a web rockstar!

It makes sense, given the structure, but I couldn't get it.

Thank you.

It's such a relief when something finally works!