Member Avatar for harsh93

Hi,,,Everyone.
I m making website through the HTML and i m facing one problem with designing.
I want to design my page with best graphics colors and insert the best colors on top and bottom.
So how can i repeat one color part on whole page which is made in photoshop.

If you find the answer then please tell me.
I m waiting.


With regards...

  • 3 Contributors
  • 2 Replies
  • 70 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short, practical answer for : make a small, tileable image in Photoshop and let CSS repeat it across the page, or skip the image and use a CSS gradient. Both approaches are lighter and more maintainable than exporting a full-width PSD slice. I agree with the direction and @diafol pointed to — move the visual into CSS and keep your layout in markup.

Create a 1px-wide (for horizontal tiling) or 1px-high (for vertical tiling) strip in Photoshop, make sure the edges match so it tiles seamlessly, export an optimized PNG (flat colors/alpha) or JPG (photographic gradients), then apply it to the element that spans the full width (body or a full-width wrapper):

/* tile horizontally across the page */
body {
  background-color: #ffffff; /* fallback */
  background-image: url('stripe.png');
  background-repeat: repeat-x;
  background-position: top center;
}

/* or use a CSS gradient instead of an image */
.header {
  background: linear-gradient(180deg, #f4f4f4 0%, #e0e0e0 100%);
}

Quick tips: keep tile height tiny for performance, test seams at 1:1 zoom to avoid anti-aliasing artifacts, use background-size / 2x images for Retina, and apply the background to the correct container (body vs centered wrapper). For syntax and options see the MDN docs on background-repeat and linear-gradient: MDN background-repeat MDN linear-gradient.

Recommended Answers

All 2 Replies

Member Avatar for teedoff

I would first suggest that if you want to learn to design web pages, you dont use photoshop. Use a text editor or dreamweaver even to learn. Photoshop was designed for image editing and doesnt do what a good text editor can do with html markup.

Member Avatar for Member #120589

Learn some CSS.

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.