In article <6nlrctFm6828U1@mid.individual.net>,
Barely Audible <somewhere@overthe.rainbowwrote:
Quote:
Quick question...
>
background:#CBCBC3
url({{url}}mod/template/templates/Default_Template/images/header.gif)
repeat-x; /* #d9e2f2 */
>
produces the light grey background to the page with an olive drab header
along the top of the page.
>
How do I change the background color to a background image?
>
The obvious (to me) solution doesn't seem to work
>
background-image: url(../../../graphics/lighttex.gif)
url({{url}}mod/template/templates/Default_Template/images/header.gif)
repeat-x; /* #d9e2f2 */
>
Any help is appreciated...
|
Your code is mistaken
Better is this construction:
background: #FFF8DC url("pics/rogerRabbitProfile.png") no-repeat top
left;
This is a shorthand property that sets the colour and the image and
other things all at once.
The #FFF8DC sets the colour of the background. This means that it will
be cornsilk and show itself where the opaque parts of the image are not.
(Roger Rabbit happens to have a very finite profile - not even as big as
the small Bob Hoskins - and will soon enough end, especially since there
is a no-repeat).
If you want an element's background colour to come from an image, you
need to set it to 'repeat'. For example, if you have an image of a
colour that you like and want to use but, for some reason, cannot
reproduce by using one of the extensive permutations from #******, then
simply
background: #DC143C url("pics/crimson.png") repeat;
gets it for you. ('repeat' is default so you don't even need this)
The idea of the #DC143C here is that if the image fails to load for some
reason, then you get a safety net substitute HTML colour.
In practice, there is hardly much point in using a pure colour from an
image. Waste of time because there is usually an HTML match in #******
If it has a texture, then there is a real point.
I will now stop and have breakfast.
--
dorayme
