linear background

[Steve1]

I don't know hardly any html so be gentle.

The diagonal, linear background of these site..

http://www.kultureflash.net/current/ (More the border)

http://www.channelfly.com/ (The side areas)

How is this achieved?

Cheers,

Steve

[cbscreative]

Steve, there are a couple ways to do this, the most common, also used on the first example, is tables with background images. Without knowing HTML, it is more challenging to explain so this may or may not help, depending on your experience.

Personally, I do like tables because they bloat the code. Do a View Source on the first site and you will see this. The second example is much better structured. I recommend you begin studying CSS. If you are really green, www.echoecho.com (http://www.echoecho.com/) has some good tutorials to get you started. Once I push myself a little harder, I will be including webmaster resources on my own site.

Here is a simple example of using tables. I am illustrating a nested table too. The outer table is the lined background with a file name made up to illustrate, the nested table creates a white background inside for text. I have also restricted the width to show that effect.

<!--This is the outer table, you will need a background image
to create the diagonal lines-->
<table width="500" background="images/bglines.gif" border="0" cellpadding="20">
<tr>
<td>

<!--This is a nested table to create the white background for text-->
<table width="400" border="0" bgcolor="white" cellpadding="20" align="center">
<tr>
<td valign="top">
<p>Place your text here and table cell will grow to fit text.</p>
</td>
</tr>
</table>
<!--end nested table-->

</td>
</tr>
</table>

You will need to find or create a background. A square tile of 20 or 30 px will be plenty.

[GreenThumb]

In its very simple form, the backgrounds are a very small picture (usually 1 x 1 pixel) that just gives the impression of continuity if you tile it.

Check ou the background at www.greenthumbcreative.com (http://www.greenthumbcreative.com) - Its basically a small square that is repeated.

What HTML editor are you using? In Dreamweaver, its is extremely simple to tile backgrounds.

[cjoe]

actually i would like to know how they get that pinstripe background. it doesn't seem to be a gif or jpg or anything. Can you achieve it with CSS alone?

[BlackBox]

Those look like a 4X4 pixel gif. you just draw four blocks of color from one corner to the other. whether css can creat this on it's own is beyond me, but you can certainly use css to describe something to use it.

[cbscreative]

I have edited the post above to include comments. In order to get the diagonal lines in the background you need to have an image (gif is best for this type) that repeats the pattern when tiled.

As for the CSS method, it will be more to handle if you are new to CSS, but here is one way below.

<!--The first div creates your background, must have the image
width is set to 500, also can use position setting-->
<div style="background-image:url(images/bglines.gif);width:500px;">

<!--This is a nested div with white background for text
padding is the same effect as tables
margin settings determine position within outer div-->
<div style="background-color:#ffffff;width:400px;padding:20px 20px 20px 20px;margin:50px 50px 50px 50px;">
<p>Place your text here and table cell will grow to fit text.</p>
</div>
<!--end nested div-->

</div>

This will either help, or confuse you more, but I hope it helps. The CSS settings can also be set externally if you use a div id="" and provide a unique name. Percentages can be used in place of px too.

[cjoe]

I have edited the post above to include comments. In order to get the diagonal lines in the background you need to have an image (gif is best for this type) that repeats the pattern when tiled.


i thought as much. i thought there may have been a 'non image' way. i am busy working on an SVG solution (oohhhhhh yeaaaah)!