CSS - Table Row Background Question

Hello,

I created a 1px x 1000px image for my background that is a gradient. In my css I have the following code:

background-image: url(images/background.jpg);
background-repeat: repeat-x;

Now, on longer pages (that obviously exceed 1000px) the graphic stops. Is there a way to get around this using CSS code, or should I just make the graphic longer?

Thanks!

I'm still pretty new to css, so please be patient. I've downloaded some pictures that are meant to take the place of the entire background without repeating. I've tried dev'ing an external style file that has this pictu here is the code I have in the style file as is:

body {color: black;
background: url(write020.jpeg) center center}

Well, every time I use this picture, it never comes up, I know I've linked it correctly, because when I place pictures that are meant to be tiled(repeated) they work, any suggestions?

I have successfully added a background image to the page but it does not center how I want it to. Right now it is positioned at top center. I would like to move it to Center center of entire page. Using this code instead of center for background-position did not do anything. Neither did 50%, 50%. What can I do to move this over.
I have the same problem with a picture file to go above the background file and web links which are all placed at top left of page. It would be nice to move them to top center of page.
How is this possible through html code?

Here is the code for the background image:
<style type="text/css">
body { background-image: url(picture/bamboo.jpg) }
body { background-position: center }
body {background-repeat: no-repeat }
</style>

Thank you for your help,

Hi all,

I need to have two CSS stylesheets that change the background color of my page.

All I need to know is the CSS code to change the background color.

Cheers.

How to add a background picture to a table？
Anyone helps? Thanks in advance.

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)

I have a table and whatever background i put in it it only shows a part of the background at the bottom of the table. if i put another table in the excisting one and then put a background in the new one then it works , But this way it ruins the layout .

<tr>
<td colspan="4" background="images/Untitled-3.s_12.gif" bgcolor="#FFFFFF"></td>
</tr>

by removing the bgcolor i get the same result..


CSS is simple and includes :

body {
background-image: url(images/bg.gif);
}
.style4 {color: #000000}
.style5 {
color: #FF0000;
font-weight: bold;
}
.style6 {font-size: 10px}
-->


Regards ,
Kevin


sorry for posting this in HTML forum also.

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 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.

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

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?!

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

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?

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