- This topic has 2 replies, 2 voices, and was last updated 9 years, 7 months ago by
.
- Posts
Hi Andrew,
I would like to choose the color of areas outside of the content area, ie. outside of max-width. And if you can even give me an option for an image background in the outside area, that would be great too. Choosing color is more important though…Thanks,
Ric.#colophon {
margin: 0 auto;
max-width: 960px;Hi Ric
The next version introduces a boxed layout. When boxed is set a regular background color and background image option is introduced. If you’d like, I could work that up for you now.
To add a background color and image, we’d need to add another constraint, this time around the main content area. Previously we introduced a constraint to the footer. I’m a little slammed today. If you could give me the weekend on this I’ll come back to with a solution ASAP.
Hi Ric
I think have this worked up for you. It’s a 100% width header with everything else boxed.
This will no longer be necessary:
#colophon { margin: 0 auto; max-width: 960px; }Instead, we’ll use this:
/* Boxed Layout: 100% Width Header */ body { background: red; } #page { background: none; } .container { padding: 0 2.67857em; } @media (max-width: 1200px) { .container { padding: 0 1.78571em; } } .site-content, #colophon { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; margin: 0 auto; max-width: 85.7143rem; }Change the first selectors color value from red to your preferred color. To use a background image there, change the background property as follows:
background: #ffffff url("img_tree.png") no-repeat fixed center;Ref: http://www.w3schools.com/cssref/css3_pr_background.asp
Let me know how you come along.
You must be logged in to reply to this topic.