CSS - How To Add A Background Picture To A Table

Hi all,
First I am sorry I am double posting here, but this time I can offer you more information about what I want to do.

First of all, I hosted my website:
http:// livetogetherdiealone.110mb.com/
(sorry they wont let me post a URL, backspace the space!)

As you can see it is difficult to read the text at some places because of the amount of light of the background image.

My Content of the site (it is written in Dutch) is placed in 2 tables:
colOne and colTwo (left and right)

Code:

<div id="content"> 	
     <div id="colOne"> 		
          <p></p> 	
     </div>  	

     <div id="colTwo"> 		
          <p></p> 	
     </div> 
</div>

Code:

#colTwo { 	 	
     float: right; 	 	
     width: 184px; 
}     

#colTwo h3 { 	 	
     margin-top: 10px;  
}

Beneath my tables I have placed a banner, and I used this code:
Code:

<div style="width:250px;margin:0 auto;"> 

<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">

<img src="http://i489.photobucket.com/albums/rr260/LTDA/ad160x600.gif">

</span>

</div>

The result leads to a transparent image!

Now I want to combine the transparent image with my tables to be able to read my text properly and to be able to see the background image. BUT I don't have a clue how to do this. So can anyone tell me how to to this? If you need more background information feel free to ask.

Thanks, stef
(I have no experience with photoshop)

All
I'm new to html and css and this one has put a flat spot on my forehead over the last 2 days. Anyway, I have an image that I want to cover successive rows in a table with; one image spanning 6 rows. The table has no borders because I would prefer to group the data fields in the cells with an image. The image is a trim box with a little faded color around the edge.

I'll take any ideas!!
Thanks'Pete

Can this be done?
My table is 4 columns with about 400 rows.

I want to style the background color across each row but in fixed blocks/rows.
i.e
rows 1-55 red
rows 55-60 green
rows 61-100 red
rows 121-158 green
etc
just using two colors.

Any pointer in how it could be done?

i have table in which i display bunch of query results. i use
<table width="80%" ....background="something.gif">

when the user's screen resolution is high the table still takes 80% of the space but the background image starts repeating. is there a way to automatically extend the image width in case the user's screen resolution is high?

thanks for the help in advance

I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too

Hey,

I have a problem with IE and my CSS.

I have a table with a background-image and I wan that to change to a certain color on rollover.

div.special {background-image: url(../images/pinkfade_bg.gif);}
div.special:hover {
background:#F8F8F8;
}
div.normal {
background:#FFFFFF;
}
div.normal:hover {
background:#F8F8F8;
}

Now this works fine in Mozilla, Safari etc. Just not IE

Any ideas?

hello,

i have a few tables with different background-image (style attribute) in my page.
how can i print the page with the background images
i know @media print should help, but i don't know how.

* does the css have to be external, or can i use the tag <style>

PLEASE HELP

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

Hey all, a fairly simple situation which is driving me crazy! =p

I have a table row which has two columns.
Now using css I have set the row to have a background image like so:
Code:

background-image:url(images/newsmiddle.jpg);
background-repeat:repeat-y; }

Now in firefox this works fine ( he content box has the image run through both columns as intended ). But in Internet Explorer on the second column the bg image starts again as if I had set the background image for that cell which is not what I want.

Anyone able to help for an IE solution?
Thanks

I am creating a table of a school's schedule, Mon-Friday across the top and 8:30-3:00 along the side, one row for every 15 min increment.

I am using a td with rowspan=3 (or 2, or 4) to represent an activity that lasts for more than 15 minutes, which most do. I have a border around each td so it shows how long each activity lasts. I have had no problem creating this table.

However, what I'm having trouble with is having each 15 minute row alternate different background colors (e.g. gray/white) within the td. So if the activity td spans three rows, I'd like the row background colors to show white/gray/white within the td. The effect should be like the old alternating color computer paper -- different color for each line, yet each activity has a black border around it that spans more than one line.

I've tried setting each 15 min tr to alternating classes, <tr class="white"> then <tr class="shaded"> etc. but this only has the effect of changing the color of a td that begins in this row. Any td defined above that's spanning this row retains the color from the original row it was created in.

I know I could achieve this by doing away with the rowspans, but then things get a bit more complicated -- manually having to set top and bottom borders for each activity and also losing the vertical-align properties within the td. Would like to avoid this if there is a better way.

So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site.

So this problem only occurs in IE, of course!

When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010

The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve.

It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky.

Any ideas why this is displaying this way...and only in IE?!

does anyone know how i can get 4 background images in my table, one for each corner of the table?

they are curved images, as i am aiming for the table to have curved edges.

Thanks

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine.

So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one.

Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to.

My other issue (if youre still interested) is a problem with the CSS command:

Code:

table
{
  empty-cells: show;
}

which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps?

Thank you much in advance.

I would like to have the background-color of a complete table row changed when I move the mouse over it.

Any ideas how to realize this within a CSS file (not with javascript)

Thanks in advance