Member Avatar for SKANK!!!!!

is there a certain positioning of the background image if thats what it is and what is the css/html to get it to work so that the text is right on the line like this one website i linked to.
it looks the same in firefox and ie.
does anyone know how to do this?
i was wondering because i have this page that doesnt do it its just border-bottom:1px solid dashed is what im doing:

see how i dont know how to get it to look like the first websites?
can anyone helps me please?

  • 2 Contributors
  • 3 Replies
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

, : short, practical guidance to reproduce the lined-paper effect and get text sitting on the lines.

Use a repeating horizontal rule that matches your text spacing, then make the element use the same spacing. Modern, image-free approach: a CSS repeating-linear-gradient produces crisp lines and scales cleanly. Key points: set line-height to the vertical spacing you want, use the gradient to draw a 1px (or 2px) line at that interval, and then tweak padding or background-position until the glyph baseline visually meets the drawn line.

Example (adjust the numbers to match your font-size and visual preference):

textarea.lined {
  font-size: 14px;
  line-height: 24px; /* spacing between text baselines */
  padding: 6px 8px;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 23px,
    #dcdcdc 24px
  );
  background-attachment: local; /* keeps lines aligned when the textarea scrolls */
}

Fallback for older browsers: use a tiny PNG stripe (one-pixel-high line in a transparent image) and repeat it vertically, or scale it with background-size so spacing matches line-height. If you are styling single-line inputs rather than a textarea, set an explicit height, line-height, and zero default browser padding to keep vertical alignment consistent.

To inspect or save the stylesheet (so you can copy or adapt rules): open DevTools (F12), find the CSS file under Sources or Network, open it in a new tab and save. When testing, try different line-height and background-position values — font metrics vary between browsers, so small tweaks are normal. Finally, reset form-control defaults (padding, box-sizing) before testing to avoid unexpected offsets.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

Just download the stylesheet and see for yourself. Your first link uses a background image, the second the border property.

Member Avatar for SKANK!!!!!

i dont understand how o dl a stylesheet.

Member Avatar for pritaeas

If you 'view code' in the browser, you can see the location of the stylesheet in the head of the document. Just paste it in the browser if it is a full URL, or add it to your URL if it is a relative path.

From your post:
link1:
link2:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.