How to lock a table background and fill the rest with a color?

lock table background and fill with a color

[dbzfyam]

Hi,

I've made a layout and I need to lock the background at the top of the table cell instead of repeating itself when there is more content and I need the space below th background to be filled with a color. Can anyone help me with this?

Thanks in advance,
Stefan.

[Birdman]

Hello and welcome to webmaster world!

CSS is your friend on this one:

<table style="background: url(/images/image.gif) no-repeat #efefef;">

Above is the CSS background shorthand format, where you can set all backgroound properties at once. It can also be done the long way:

<table style="background-image: url(/images/image.gif); background-repeat: no-repeat; background-color: #efefef;">

You can replace no-repeat with repeat-x or repeat-y to make it tile in either direction.

Have fun!

[dbzfyam]

Thank you very much! Just tried it and it works great. Do you know if it is possible to make a scrollable table cell with a fixed background? I really need something like that aswell to save space (I tried it with a iframe but I read a iframe isn't search-engine friendly and it''s very difficult to fit the background in it).

[Birdman]

You're welcome!

Sure, CSS can help you there too. To fix the bg in place, you will use yet another background property:

background-attachment: fixed;

...and to make the cell scroll, use the overflow property:

overflow: scroll;

Here is an example(using shorthand):

<td style="background: url(path) fixed no-repeat #efefef; overflow: scroll;">

Cheers!

[dbzfyam]

I just tried that code, but it doesn't seem to work (the images inside the tables are pushed down aswell as the content). I also tried this:

<td colspan="7" rowspan="5" valign="top" style="BACKGROUND: url(images/layout_20.gif) no-repeat left top; background-color: #868686; overflow: scroll"></td>

which also didn''t work..

[dbzfyam]

Also, how can I change the cellpadding on only 2 cells? I tried using the cellpadding on a TD element, but it didn't work. When I tried it on the table itself, it did work, but all the images were padded aswell. How can I do this on only 2 specific cells?

[tedster]

<td style="padding:5px;">

[dbzfyam]

Thanks tedster! It seems to be working now. If I could get the scrolling cell to work, it would be great (does it work in all the major browsers?).

[dbzfyam]

This will be my last question (at least for now): how can I add a shadow under the text? I currently have this:

<td colspan="7" rowspan="2" align="justify" valign="top" style="padding:10px; BACKGROUND: url(images/layout_18.gif) no-repeat left top; text-transform: uppercase; background-color: #868686; text-shadow: 3px 3px 5px red;">

But the last part doesn't work (also tried text-shadow: Black;). Thanks for the help!

[tedster]

text-shadow is a css2 property, and currently has very little browser support - Safari on Macintosh is the only major one that I know of. It will be carried into ccs3, so we can hope for browser support to grow - it can be a good alternative to graphic text.

The W3C website has a browser test at the bottom of this page:
[w3.org...]

IE (since version 4) has a proprietary shadow filter that does something similar:
[msdn.microsoft.com...]

If you want cross-browser text shadows for Safari, IE, Gecko browsers and Opera, you will need to do some hacking. Here's one hack I found at:
[workingwith.me.uk...]

/* default setup that everything sees */
.shadow {
/* needed for Internet explorer */
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);

/* Needed for Gecko */
line-height: 2em;
white-space: nowrap;
}

/*
* used by browsers which know about
* :before to create the shadow
*/
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}

#shadow_1:before {
content: 'In shadow';
}
#second_2:before {
content: 'Happy Shadowing!';
}

/*\*/
html*.shadow {

[color:red;/* required by Safari
* so that [] is correctly
* begun. associated with
* the property, yet hiding
* it. Seen by IE6 */

/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
text-shadow: #666666 5px 5px 5px;

]color:auto; /* resets color for IE6 */
}/**/

/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}

/*\*/
html*.shadow:before {

[color:red;/* required by Safari.
seen by IE6 */

/*
* seen by IE6 and Safari, but hidden
* from Gecko
*/
display: none;

]color:auto; /* resets color for IE6 */
}/**/

/*
* end hack using dummy attribute selector
* for IE5 mac
*/
.dummyend[id]{clear: both;}

[dbzfyam]

Just tried that code but it doesn't seem to work (tried it in Mozilla, Firefox, IE and Opera). Or I'm doing something wrong..

In the example above, the html which I used to get the text shadowed across all browsers was <p class='shadow' id='shadow_1'>In shadow</p>. Whenever you're adding shadowed text to your pages using this technique, ensure that you add a relevant id, and duplicate the text of the shadow into your style sheet.

I tried that class and id but it doesn't work here.