Member Avatar for inplainsite

Hello all,

I am currently developing a new website in asp.net, C#. I first designed the master page in Photoshop. I used a really cool pattern that I imported into Photoshop. I want to be able to put this on my website as a repeated image. My question is; How do I do this without having to use one image for the whole background?

Any input helps :)

  • 7 Contributors
  • 6 Replies
  • 343 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by maninaction

Dani AI

Generated

Short expert note: and are right to steer you toward a CSS-based solution, and ’s point about keeping the tile small helps performance. Below is a compact, practical workflow that starts in Photoshop and finishes with a lightweight, repeatable web tile plus a couple of modern tips.

Make a true seamless tile in Photoshop:

  1. Work at actual pixel size and crop the area you want to repeat.
  2. Use Filter > Other > Offset with wrap-around (set values to half your canvas) to expose seam lines.
  3. Fix seams with Clone Stamp / Healing Brush or Content‑Aware tools, then re-run Offset until edges match.
  4. Export a tightly cropped PNG (or PNG-8/GIF for very limited palettes, JPEG for photographic patterns) and run it through an optimizer (ImageOptim/TinyPNG) to cut bytes.

Serve it with CSS (example):

html {
  background-color: #f4f4f4;
  background-image: url('/images/pattern.png');
  background-repeat: repeat;
  background-position: 0 0;
}

Advanced/production tips:

  • For high-DPI screens provide an @2x image and scale it back with background-size inside a media query so the tile remains crisp.
    @media (min-resolution: 192dpi) {
html {
  background-image: url('/images/pattern@2x.png');
  background-size: 48px 48px; /* display size of one tile */
}
}
  • Consider a tiny data-URI for very small, single-color tiles to avoid an extra request.
  • Test at actual viewport sizes and different browsers; check repeat seams at odd offsets and on mobile.

Recommended Answers

All 6 Replies

Member Avatar for TheAlex

You could use the CSS background-repeat property:

Member Avatar for JamieLynnSEO

background repeat property is probably your best bet for sure. ^_^

Member Avatar for WebStudio Pros

background repeat is the answer!

Member Avatar for tungnk1993

Resize your pattern to smaller size : 1x1 or 10x10 is also fine.

Then use CSS :

body {
background: url("images/pattern.png") repeat scroll left top transparent;
}

More option here : www.w3schools.com/css/css_background.asp

Member Avatar for Zaw Myo Tun

C# Syntax (Toggle Plain Text)

PictureBox[] arrpic = new PictureBox[5];
arrpic[0] = pic1;
arrpic[1] = pic2;
arrpic[2] = pic3;
foreach (PictureBox pb in arrpic)
{
picshow.Show(pb);
}

Member Avatar for maninaction

You said that you want to go for CSS right. So better to go for background-repeat

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.