Member Avatar for shlokka

hi guys,

i have an image of a box i would like to use as backgrounds for certain content boxes around my site.

i can insert the corners ok, but the centre images overlap the corners. how would i style this to output my box image correctly?
it needs to auto expand depending on that divs content. i have already chopped up the image into peices, but i just cant align the imaages correctly

any ideas?
thanks

  • 3 Contributors
  • 2 Replies
  • 104 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by vitaquous

Dani AI

Generated

Short summary: sliced a decorative box into pieces but the tiled/center image is overlapping the corner pieces. correctly pointed out that sample markup helps diagnose this, and mentioned overflow and sprites as options. Below are practical, modern ways to assemble a resizable image box plus quick debugging tips.

Preferred modern approach — CSS border-image (nine-slice):
Use a single source image and let the browser slice and draw corners, edges and (optionally) the center. It auto-scales with content and avoids extra markup. This works well for UI chrome and is supported in current browsers; provide a fallback for very old browsers.

Example (shorthand):

.box {
  border: 20px solid transparent; /* match slice width */
  border-image: url('box-sprite.png') 20 fill repeat;
}

Reference: MDN — border-image

Fallback / broader-compat approach — multiple backgrounds:
Use CSS multiple backgrounds to place the four corners, edge tiles (repeat-x / repeat-y) and a center tile. Reserve space for corners with padding equal to corner size so content does not cover them.

Example pattern:

.box {
  background:
    url(corner-tl.png) top left no-repeat,
    url(corner-tr.png) top right no-repeat,
    url(edge-top.png) top center repeat-x,
    url(edge-left.png) center left repeat-y,
    url(center.png) center center repeat;
  padding: 20px; /* same as corner size */
}

Reference: MDN — Using multiple backgrounds

Quick troubleshooting checklist:

  • Make padding equal to corner size so the center area doesn’t cover corners.
  • If corners are separate positioned elements, ensure correct stacking with z-index.
  • Use no-repeat for corner images and repeat-x/repeat-y for edges.
  • If you try sprites, sprite positions must match the slice sizes exactly.
  • Inspect computed box model in DevTools to verify padding/border sizes and that images are positioned as intended.

These options let the box expand with content without visual overlap; pick border-image for simplicity or multiple backgrounds/nested markup for older-browser fallbacks.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Without a link to the site or you posting sample code, it's really challenging to help you.

Member Avatar for vitaquous

It would help if I knew what type of image, because if it is just a background image design then just make the overflow not visible? If it is a image of trees or such why not have various images of the same thing and sprite them showing which ever one you want depending on the div size and still make the over flow not visible?

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.