Re: [WSG] table background images with CSS
I've finally put the site up where it can be seen. Please don't be too
harsh...it's fairly basic, but it serves my client well (it's also
missing a real logo, etc). Anyway, enough excuses. :)
To repeat my question, I have an image of a bass player that I want on
the right side of the table, starting at the top. I have an ID
(layout) for the table itself, I have the following in my CSS:
#layout {
border: 2px solid #000;
background: url('images/bass.png') no-repeat right top;
}
However, it's not showing up. Like I said, I'm sure it's some small
oversight on my part. Thanks for the assistance.
http://www.drzeus.net/clients/stevierays/
~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
content without clutter
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] table background images with CSS
Hi John However, it's not showing up. Like I said, I'm sure it's some small oversight on my part. Thanks for the assistance. http://www.drzeus.net/clients/stevierays/ Fundamental issue, which was already hinted at by John D Wells: the table has a background image but the cells all have a background colo(u)r that obscures it. It's like taking a photograph as a canvas for a painting. Would you see the photo or the painting? One way to fix the problem (whether you use tables or divs) is to put the image in the foreground, use positioning and z-index (with a transparent gif or PNG so the table cell background colours show through). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] table background images with CSS
That's it. Thanks to you and John. Now I have to make it more transparent on that red background. :) ~john _ Dr. Zeus Web Development http://www.DrZeus.net content without clutter on 2/23/2005 3:49 PM Bert Doorn said the following: Hi John However, it's not showing up. Like I said, I'm sure it's some small oversight on my part. Thanks for the assistance. http://www.drzeus.net/clients/stevierays/ Fundamental issue, which was already hinted at by John D Wells: the table has a background image but the cells all have a background colo(u)r that obscures it. It's like taking a photograph as a canvas for a painting. Would you see the photo or the painting? One way to fix the problem (whether you use tables or divs) is to put the image in the foreground, use positioning and z-index (with a transparent gif or PNG so the table cell background colours show through). Regards ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] table background images with CSS
First off, let me say that yes, I'm using a single table for the layout
of this project (my client insists upon it, since he doesn't trust CSS
layout yet...go figure).
I'm having a bit of a mind lapse, I think, because I can't get the
background image to span the table rows.
Here's the XHTML:
table id=layout
tr
td id=header colspan=2/td
/tr
tr
td id=navbar colspan=2/td
/tr
tr
td id=content/td
td id=sidebar/td
/tr
tr
td id=footer colspan=2/td
/tr
/table
What I want is is put
background: #CC url('images/bass.png') no-repeat right top;
in the layout ID so that it can span vertically through the table
rows, but all I'm getting is a bit of it shown in the sidebar ID. I
want it see it shown through the navbar and header ID's as well.
My explanation may be inadequate, but I'm not prepared yet to show
anything online. Can anybody decipher my email and give me some tips on
how to accomplish this? I'm sure it's something outrageously stupid
that I've overlooked.
Thanks.
~john
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] table background images with CSS
Hi John
background: #CC url('images/bass.png') no-repeat right top;
in the layout ID so that it can span vertically through the table
rows, but all I'm getting is a bit of it shown in the sidebar ID. I
want it see it shown through the navbar and header ID's as well.
With the above CSS rule you would need a very tall background
image if you want it shown the full length *height) of the
table/page.
If it is an image that can and should tile, remove the no-repeat
from your background rule (or replace it with the seemingly more
appropriate repeat-y).
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] table background images with CSS
Thanks for the reply, Bert. Yes, the image is tall enough to do what I
want, and I don't want to tile it. It seems that no matter what I try,
the image isn't showing in the navbar or header (even though the CSS
is in the layout ID, which is attached to the table itself.
~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
content without clutter
on 2/22/2005 11:17 AM Bert Doorn said the following:
Hi John
background: #CC url('images/bass.png') no-repeat right top;
in the layout ID so that it can span vertically through the table
rows, but all I'm getting is a bit of it shown in the sidebar ID. I
want it see it shown through the navbar and header ID's as well.
With the above CSS rule you would need a very tall background
image if you want it shown the full length *height) of the
table/page.
If it is an image that can and should tile, remove the no-repeat
from your background rule (or replace it with the seemingly more
appropriate repeat-y).
Regards
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] table background images with CSS
Do you have a link to a live example of this behavior? Are your XHTML
and CSS valid? Are there other styles inadvertently tied to other tds
that are blocking out the #layout background styles?
On Feb 22, 2005, at 6:05 AM, john wrote:
First off, let me say that yes, I'm using a single table for the
layout of this project (my client insists upon it, since he doesn't
trust CSS layout yet...go figure).
I'm having a bit of a mind lapse, I think, because I can't get the
background image to span the table rows.
Here's the XHTML:
table id=layout
tr
td id=header colspan=2/td
/tr
tr
td id=navbar colspan=2/td
/tr
tr
td id=content/td
td id=sidebar/td
/tr
tr
td id=footer colspan=2/td
/tr
/table
What I want is is put
background: #CC url('images/bass.png') no-repeat right top;
in the layout ID so that it can span vertically through the table
rows, but all I'm getting is a bit of it shown in the sidebar ID. I
want it see it shown through the navbar and header ID's as well.
My explanation may be inadequate, but I'm not prepared yet to show
anything online. Can anybody decipher my email and give me some tips
on how to accomplish this? I'm sure it's something outrageously
stupid that I've overlooked.
Thanks.
~john
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] table background images with CSS
John Wrote: I'm having a bit of a mind lapse, I think, because I can't get the background image to span the table rows. Take a look at this demo from the master: http://stopdesign.com/present/2004/sydney/beauty/?no=64 Click on 'playing with backgrounds' HTH aj ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
