By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,686 Members | 1,840 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,686 IT Pros & Developers. It's quick & easy.

Backgrounds...

P: n/a
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...

Nov 8 '08 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Barely Audible wrote:
Quick question...
A "quick question" is usually a hasty question that does not describe the
real problem.
background:#CBCBC3
url({{url}}mod/template/templates/Default_Template/images/header.gif)
repeat-x; /* #d9e2f2 */
Where's your URL? And what's that odd thing {{url}}?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Nov 8 '08 #2

P: n/a
In article <6n************@mid.individual.net>,
Barely Audible <so*******@overthe.rainbowwrote:
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
Nov 8 '08 #3

P: n/a
dorayme wrote:
In article <6n************@mid.individual.net>,
Barely Audible <so*******@overthe.rainbowwrote:
>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.
This still hasn't actually answered the question!
Nov 9 '08 #4

P: n/a
"Barely Audible" <so*******@overthe.rainbowwrote in message
news:6n************@mid.individual.net...
This still hasn't actually answered the question!
Because what you are trying to do is assign multiple background images to
the same element, and CSS only allows one background image per element.

Multiple backgrounds are a CSS3 feature, currently AFAIK only supported by
the Webkit browsers (Safari/Konquerer/Chrome etc) and I have a sneaking
suspicion Firefox 3.1, but I haven't checked that last.

At the moment the only way to reliably do what you're talking about is to
put the element in a wrapper and assign the extra background to the wrapper
instead.

Nov 9 '08 #5

P: n/a
In article <6n************@mid.individual.net>,
Barely Audible <so*******@overthe.rainbowwrote:
dorayme wrote:
In article <6n************@mid.individual.net>,
Barely Audible <so*******@overthe.rainbowwrote:
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?

Your code is mistaken

Better is this construction:
[... here, poor old dorayme, on any empty stomach tries its very best to
help an earthling that I can hardly even hear with boosted signal
electonics...]

This still hasn't actually answered the question!
I was hoping to give you enough background on it for you to be able to
understand what to do. You do not say if you understood anything I said?

--
dorayme
Nov 9 '08 #6

P: n/a
In article <gf**********@registered.motzarella.org>,
"Nik Coughlin" <nr******@gmail.comwrote:
"Barely Audible" <so*******@overthe.rainbowwrote in message
news:6n************@mid.individual.net...
This still hasn't actually answered the question!

Because what you are trying to do is assign multiple background images to
the same element, and CSS only allows one background image per element.

Multiple backgrounds are a CSS3 feature, currently AFAIK only supported by
the Webkit browsers (Safari/Konquerer/Chrome etc) and I have a sneaking
suspicion Firefox 3.1, but I haven't checked that last.

At the moment the only way to reliably do what you're talking about is to
put the element in a wrapper and assign the extra background to the wrapper
instead.
Yes... along lines like:

<http://netweaver.com.au/alt/multipleBackgrounds.html>

--
dorayme
Nov 9 '08 #7

P: n/a
rf

"Barely Audible" <so*******@overthe.rainbowwrote in message
news:6n************@mid.individual.net...
Quick question...

background:#CBCBC3
url({{url}}mod/template/templates/Default_Template/images/header.gif)
This looks like unparsed server side template stuff. It's better to supply
the *output* from that template parser, a URL to your page for example.
In any case it looks like it is supplying a background image.
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?
You already have a background image. See above.
>
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 */
It doesn't work because you are supplying two backround images. Obviously
the second one is the one that is used.
Nov 9 '08 #8

P: n/a
Barely Audible wrote:
This still hasn't actually answered the question!
You haven't asked a sensible question, and you don't seem to have understood
or even read the responses you got (you indicate this by pointless
fullquoting).

It just remains to kindly ask you to keep using the same forged sender
information in your future postings (until you get a clue), to help keeping
Usenet a cleaner place. TIA!

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Nov 9 '08 #9

P: n/a
Nik Coughlin wrote:
"Barely Audible" <so*******@overthe.rainbowwrote in message
news:6n************@mid.individual.net...
>This still hasn't actually answered the question!

Because what you are trying to do is assign multiple background images to
the same element, and CSS only allows one background image per element.

Multiple backgrounds are a CSS3 feature, currently AFAIK only supported by
the Webkit browsers (Safari/Konquerer/Chrome etc) and I have a sneaking
suspicion Firefox 3.1, but I haven't checked that last.

At the moment the only way to reliably do what you're talking about is to
put the element in a wrapper and assign the extra background to the wrapper
instead.
Ah thanks Nik!
Nov 9 '08 #10

This discussion thread is closed

Replies have been disabled for this discussion.