Tablecloth Background

[Jaytheforth]

I'm attempting to make a tablecloth background out of pure css. I'm trying to make a set of red vertical lines, overlaying the white space of the
background-color: #fff;
I'd also like to make another set of red horizontal lines, the same color as the first set of lines. When each of the lines meet every other square, I'd like the red to intensify, and deepen in red.
Essentially, I'm looking for something like this:
http://www.hippocampusmagazine.com/wp-content/uploads/2011/10/95218872-300x300.jpg
The problem is, I'm not sure how to make repeating lines, or how to combine the colors of the lines in CSS.
I'm attempting to build my background with the aid of webkits, and I program in XHTML 1.0 Strict.

[BuildMyWeb]

funny i saw (and answered) this post elsewhere. good luck with it.

[keyboard]

If you've got a solution to their problem, why don't you post it?

[ApacheTech]

background-color:white;
background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;

[bernie1227]

background-color:white;
background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;

Hmmm..... Doesn't seem to be displaying for me....

[itivae]

Is there a reason that the background needs to be built as separate lines? Couldn't you just build the image you want in Photoshop and then apply it as a fixed background-attachment?

[ApacheTech]

Is there a reason that the background needs to be built as separate lines? Couldn't you just build the image you want in Photoshop and then apply it as a fixed background-attachment?

Read the first words of the first post in the thread.


I'm attempting to make a tablecloth background out of pure css.

[ApacheTech]

Hmmm..... Doesn't seem to be displaying for me....

Here it is in action:

http://lea.verou.me/css3patterns/#tablecloth

[bernie1227]

Here it is in action:

http://lea.verou.me/css3patterns/#tablecloth

Thanks, may have just been something up with how I implemented the CSS.

[ApacheTech]

Thanks, may have just been something up with how I implemented the CSS.

They have it set up as inline tags on the actual page (I mined the page with FireBug), but it's attached to the body tag. Fully formed CSS would be:



/* GLOBAL STYLES
/---------------------------------*/
body
{
background-color:white;
background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
}