CSS

  • Thread starter Thread starter Guest
  • Start date Start date
Use a gradient image as a background image, and use CSS to stop the
image tiling.

The CSS will be similar to:

<style type="text/css">
..grad {background: white url("images/gradient.jpg") repeat-x top;}
</style>

And the HTML:

<div class="grad">content goes here</div>

The CSS goes immediately before the </head> tag in Code view, or
(without the <style..> and </style> tags) in an external style sheet.

The image should be made in a graphics program, as high as required, but
need only be 10px wide to keep the file size low. The CSS above will
tile the image across the width of the container.
 
Thanks for coming back so soon. However, I've never used gradients before and
as a novice it's all a bit above my head. I use Photoshop seven and I've
tried to create a gradient but with litle sucess. I think I understand the
rest of what you are saying so I'll try and find a tutorial for PS7. Thanks.
 
Hi Ron,

I've made the gradient image and saved it in the webs image folder
images/gradient-1.jpg but I can't seem to get it to work and have obviously
placed the coding in the wrong place. Could you please take a look at the
source on http://www.book-holidays-direct.com/ and tell me where I've gone
wrong. Your help is much appreciated as I'm a disabled pensioner trying to
make an extra pound (Dollar to you).
 
I prefer pounds to dollars as well :)

There are three errors:

Change
<style type="text/css">
...grad {background: white url('images/gradient-1.jpg') repeat-x top;}
</style>
to
<style type="text/css">
..grad {background: white url('images/gradient-1.jpg') repeat-x top;}
</style>
There should only be one "."

Change
<tr>
<div class="grad"><td width="100%">
to
<tr>
<td width="100%"><div class="grad">

Finally, at the end of that cell, change
</td></div>
</tr>
to
</div></td>
</tr>

The <div> must be inside the cell.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
 
Thank you a million times over.

Ronx said:
I prefer pounds to dollars as well :)

There are three errors:

Change
<style type="text/css">
...grad {background: white url('images/gradient-1.jpg') repeat-x top;}
</style>
to
<style type="text/css">
..grad {background: white url('images/gradient-1.jpg') repeat-x top;}
</style>
There should only be one "."

Change
<tr>
<div class="grad"><td width="100%">
to
<tr>
<td width="100%"><div class="grad">

Finally, at the end of that cell, change
</td></div>
</tr>
to
</div></td>
</tr>

The <div> must be inside the cell.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp
Click to expand...
 
Back
Top