Member Avatar for jemz

Hi, I need some help to you all,how can i make image like this in the header of this cite

http://www.freecsstemplates.org/

the color dark green that looks like grooving lines or slanting lines,can you help me please how to make like this...please help me.Thank you in advance and i am hoping for your positive response.

Best Regards,

Jemz

Edited by jemz because: n/a
  • 3 Contributors
  • 3 Replies
  • 78 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by jemz

Dani AI

Generated

The thread correctly identified a stripe/tile look for the header. showed a raster workflow and noted a pattern-based approach. An alternative that often simplifies maintenance and improves scalability is to generate the stripes with CSS or a small inline SVG instead of shipping a bitmap tile. These approaches scale cleanly for different screen sizes, avoid extra HTTP requests, and make color tweaks easier.

A compact CSS-only example using a repeating gradient:

.header {
  background: repeating-linear-gradient(135deg,
    #1a4b36 0 8px,
    #0f3426 8px 16px);
}

The angle controls the slope. The pixel stops control stripe thickness; adjusting those values changes the stripe width. For older user agents, include a plain background color fallback before the gradient. When raster tiles are preferred, keep the tile perfectly seamless and export with a small palette (PNG-8) to save bytes.

For vector control, an SVG pattern gives crisp results at any resolution and can be embedded inline so the color can be swapped with CSS. Check browser support and include a simple fallback for legacy browsers. Also verify text contrast over the header (WCAG contrast) and test the result on high-DPI screens.

Further reference: MDN repeating-linear-gradient and MDN SVG patterns.

Recommended Answers

All 3 Replies

Member Avatar for likemultimedia

Follow the steps below that we used in our project :

Open your photoshop > File > New > Set your width and height (assuming 11x3in. 100resolution) > select color > fill > Shift+Control+N then OK > click "rectangular tool" > right click on the rectangle > then select "fill path" click OK > press Enter > Click "Move tool" > rotate you rectangle to your desire angle and hit enter > Opacity 25% > and duplicate your layer as much as you want ;)

Edited by Ezzaral because: Snipped advertising link.
Member Avatar for anand01

hi Jemz,
that image is repeated background you just create small pattern, then use repeat option in css for body tag

Member Avatar for jemz

hi Jemz,
that image is repeated background you just create small pattern, then use repeat option in css for body tag

Hi sorry for the late reply...yes thank for the idea,and it solved my problem...thank you so much.more power to you always...

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.