Clip Background Image using CSS

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Clip Background Image using CSS

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Clip Background Image using CSS

Page: [1]


mshin Posts: 11 Joined: 10/8/2004 Status: offline	Clip Background Image using CSS - 2/1/2005 16:07:47 I am using a repeating single dot pattern as a background for a table cell (appears as a dotted line separator). What I'd like to do is have the background start, say, 10px in from the start and end points. What I am doing now is inserting a single cell table as in the following snippet: <td width="9" class="VContainer"> <table width="100%" height="100%"> <tr> <td class="VSeparator"></td> </tr> </table> </td> <style> TD.VContainer { padding-top: 8px; padding-bottom: 8px; } TD.VSeparator { background: transparent url(images/vdot.gif) repeat-y; } </style> What I'd like to end up doing is to get the same effect with only one table cell and one class. I've tried several style elements without success...

jaybee

Posts: 14207
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

RE: Clip Background Image using CSS - 2/1/2005 19:14:19

quote:

What I'd like to do is have the background start, say, 10px in from the start and end points.

Well then your table doesn't make any sense. You're putting a 100% width table inside a cell that's 9 pixels wide.

If you just want a dotted line separator, why dont you just use insert horizontal line and style that?

This is your html

<hr />

This is your css

hr{border: 0 0 2 0; border-style:dashed;}

Then just adjust the width, padding, etc to suit.

This is what it looked like on a test page I did.

Thumbnail Image

Attachment (1)

_____________________________

If it ain't broke..... fix it until it is.

GAWDS
Now where did I put that Doctype?

(in reply to mshin)


bobby Posts: 11399 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Clip Background Image using CSS - 2/1/2005 23:12:31 what if you wanted little star .gifs instead of dots? _____________________________ In order to remove a wall you must first remove the Windows® (in reply to jaybee)