Iorhael wrote:
>Is there any way to add a background color to a page that already has a
>background image? I want to put the background color around the container:
>
>www.drk-writing.com/northwesternesse/
>
>Debbie
>
I understand you want the outside of the centered content-column
colored, and the inside behind the text just what it is (inclusive the
static figure in the background)?
Then it is possible, I think.
(1) You take the bg-image and make the width just the same as the width
of the heading-image (was it 740px?). You can cut off a piece if the
image is broader.
(2) Decide if you want the background-img in the same place as now, or
perhaps some more to the left (in the left-right center of the left
content-column): move the image in the white background to the desired
horizontal position.
(3) Save!
(4) Decide what color you want around, for instance some brown #DC994A.
(5) Now the style will be:
body {
background-image: url(NWEGraphics/latestnwelogobkgrd.gif);
background-attachment: fixed;
background-position: 50% 220px; /* horizontal in the middle,
vertical in px from the top for best result */
background-repeat: repeat-y; /* to fill everything from top to
bottom in the central column */
background-color: #DC994A; /* instead of the white: the brown or
other color you want */
font: 100.01% 'Comic Sans MS', sans-serif;
text-align: center;
color: #000;
}
For the background-things you can also use the shorthand:
{ background: #DC994A url(NWEGraphics/latestnwelogobkgrd.gif) fixed
repeat-y 50% 220px; } /* just spaces between properties*/
In this way everything what is not in the column of the repeated image,
will be brown (that is: left & right).
(6) The only thing to do now is to make the space between the top of the
header and the upper border of the screen also brown, instead of white
with a piece of the background-figure. And the same for the space on
bottom of the page. That you can do with:
#container {
width: 740px;
margin: 0 auto 0 auto; /* no empty margin-top or margin-bottom
distance anymore */
text-align: left;
border-top: 8px solid #DC994A; /* now big and brown fills the space */
border-left: 1px solid #030; /* stays */
border-right: 1px solid #030; /* stays */
border-bottom: 8px solid #DC994A; /* also big and brown */
}
- If I didn't forget anything: ready!
Good luck with it,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
